Adding `includePaths` in the `stylePreprocessorOptions` seems to have no effect

[vmasek]

• bug report

Description

Adding includePaths in the stylePreprocessorOptions entry in angular-cli.json's apps object seems to have no effect.

Versions.

@angular/cli: 1.0.0
node: 6.10.0
os: linux x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1
@angular/language-service: 4.0.1

Repro steps.

• ng new new-project --style=scss
• cd new-project
• create new _variables.scss in src/styles
• add the following to src/styles/_variables.scss:

$some-variable: #fff;

• add the following to src/app/app.component.scss:

@import 'variables';

h1 {
  color: $some-variable;
}

• add the following to .angular-cli.json's apps property:

      "stylePreprocessorOptions": {
        "includePaths": [
          "styles"
        ]
      },

• run ng serve

The error log

ERROR in ./src/app/app.component.scss
Module build failed: 
@import 'variables';
^
      File to import not found or unreadable: variables.
Parent style sheet: stdin
      in ~/PROJECTS/new-project/src/app/app.component.scss (line 1, column 1)
 @ ./src/app/app.component.ts 56:17-48
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Desired functionality

https://github.com/angular/angular-cli/blob/5b1668f9ba39175e0f57fe23df6672ec40c3b745/docs/documentation/stories/global-styles.md

[efriandika]

it works for me..

[jgatjens]

it doesn't work for me :

angular/cli: 1.0.1
node: 6.9.5
os: darwin x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0

[procload]

I can reproduce the OP's problem. No matter how simple (I tried both with the node_modules folder and a folder inside my app) I try to make the includePaths property inside of stylePreprocessorOptions, I can't get it to work and it will always throw the File to import not found or unreadable: error.

[AlejandroMAL]

@jgatjens I still have the same issue, can you show us your angular-cli.json with the stylePreprocessorOptions to see how's your configuration.

[jgatjens]

@AlejandroMAL it didn't work for me.

[tomchinery]

I'm having this issue as well, heres my the relevant part in angular-cli.json:

  "stylePreprocessorOptions": {
    "includePaths": [
      "./src/Assets/Scss/bourbon/bourbon",
      "Assets/Scss/neat/"
    ]
  }```

Note: Not sure if it was a relative or full path so tried both. 

[filipesilva]

I tried precisely following @vmasek instructions and it was working for me.

kamik@T460p MINGW64 /d/sandbox/master-project (master)
$ git st
On branch master
Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   .angular-cli.json
        deleted:    src/app/app.component.css
        modified:   src/app/app.component.ts

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        src/app/app.component.scss
        src/styles/

no changes added to commit (use "git add" and/or "git commit -a")

kamik@T460p MINGW64 /d/sandbox/master-project (master)
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 9a3eaa4a07fcf5b3e2da
Time: 8433ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 157 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 63.7 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.05 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

No errors and the h1 in my app was white.

Does someone have a particular project where this always happens?

[vmasek]

@filipesilva I have updated the Angular CLI, tested on the new clean project and everything seems working for me now.

This is the project and commit that adds desired functionality.
https://github.com/vmasek/example-angular-cli-include-paths/commit/06b1731c59e794d2ff0921e4bde3bcd23717d5c5

I've also tested the src (.) and styles include paths. Both of them are working.