Angular-cli: Adding `includePaths` in the `stylePreprocessorOptions` seems to have no effect

[vmasek]

• [X] 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.

[filipesilva]

Closing then, thanks for getting back to me @vmasek.

[gdheller42]

I followed @filipesilva example at https://github.com/vmasek/example-angular-cli-include-paths/commit/06b1731c59e794d2ff0921e4bde3bcd23717d5c5. restarted ng serve it worked! It does NOT work if you do not restart ng serve... Thanks

[realappie]

@filipesilva This doesn't seem to work with a multi app setup :(

[filipesilva]

@realappie can you open a new issue with a reproduction so we can investigate?

[Jrubzjeknf]

@gdheller42 's comment is important here. You must restart ng serve after changing the .angular-cli.json, or you'll keep getting the compilation error.

[MickL]

@filipesilva Unfortunately this is not working on Angular CLI v1.3.0-rc.3. I copied your code with no success. Could you please retest?

src/styles/_variables.scss:

$grid-gutter-width-base: 30px;

src/app.component.scss:

.container-fluid {
    margin-bottom: $grid-gutter-width-base;
}

.angular-cli.json:

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

Webpack:

Module build failed: 
        margin-bottom: $grid-gutter-width-base;
               ^
Undefined variable: "$grid-gutter-width-base".

[Jrubzjeknf]

@MickL Did you import the _variables.scss with @import '_variables';?

[MickL]

Oh! So even when setting includePaths we have to import the files anyway? So the only purpose for includePath is to write "variables" instead of "../../../styles/variables" ?

[Splaktar]

@MickL correct.

[nhack]

@vmasek is it possible to put the code on github again? I'm struggling with angular-cli and sass and an example would be great.

Thanks!

[Jrubzjeknf]

MickL's example should be sufficient. Are you missing anything?

[nhack]

it seems to be working :) I've realized that it's a problem with IDEA, it doesn't recognize the imported file but if I do ng serve everything works fine.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}