stylePreprocessorOptions loads node_modules instead of scss

[MickL]

Using @import 'file' imports from node_modules when the file is named the same way any node module is named.

Angular.json

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

Existing files

src 
   - styles
          - _globals.scss
          - _rxjs.scss

my-component.scss

@import 'globals';

-> Imports node-module "globals" index.js

my-component.scss

@import 'rxjs';

-> Imports node-module "rxjs" index.js

Version
@angular/cli: 6.0.0-rc.7

[iowaz]

This also happens if file name is 'colors'

[AlexBachmann]

I can confirm this issue.

[dev-nicolaos]

I can as well. Experienced this bug with an existing project after using the new ng update cli command, as well as with a fresh app generated with ng new (CLI version 6.0.3)

[tomaszbrudzinski]

same with 'base'

[ZbigiMan]

I spent all day on this...

"stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/foundation-sites/scss"
              ]
            },

... and angular-cli is trying to import some javascript instead of scss.

Please help!

Angular CLI: 6.0.8
Node: 8.9.1
OS: win32 x64

[dev-nicolaos]

Any update from the team on this? @hansl @Brocco @filipesilva

[ethanj]

@ZbigiMan

I got Angular 6 with Foundation 6 working with a variation of your question/answer...

Include your stylePreprocessorOptions config, then copy

node_modules/foundation-sites/scss/settings/_settings.scss

into your src directory, then edit this line:

@import 'util/util';

to be

@import 'node_modules/foundation-sites/scss/util/util';

In your style.scss you can now do:

@import 'settings';
@import 'foundation';
@include foundation-everything;

I still get a warning I have not worked on yet, but everything compiles.

[AlexBachmann]

Hey @ethanj. The problem of this issue is not exactly the problem @ZbigiMan describes. In fact quite the opposite. The problem is NOT that you cannot add include paths to the stylePreprocessorOptions of the CLI. You can, and it works, as you described.

The problem is, that the loader FIRST tries to load from the node_modules directory and THEN tries to load from the included paths.

That means, if you have a module called "colors" in node_modules, or a module called "base" you cannot load SCSS files with the same name out of your include paths. These SCSS statements will trigger an error, because the compiler doesn't look in your include paths FIRST but instead tries to load the module in node_modules.

@import "base"
@import "colors"

We did not have this behavior in the old version of the CLI and this is why it's breaking existing code.

[MickL]

Also it tries to import js files, which seems not correct to me, too.

[aksjer]

same issue...

Invalid CSS after "v": expected 1 selector or at-rule, was "var colors = requir" in /Users/jeromeaksogut/Documents/pva-stack/app/node_modules/colors/lib/index.js (line 1, column 1) ERROR in ./src/app/shared/component/modification-history-list/modification-history-list.component.scss Module build failed: var colors = require('./colors');

[ZbigiMan]

I also noticed that it's problem with sass-loader 7. Downgrading to sass-loader 6 solves the issue, so It's not problem with @angular/cli itself but with dependency - sass-loader.

[MickL]

Guys if you have the same issue upvote the issue itself. Contributers dont see your +1 comments and dont see your upvotes on the „colors“ thingy.

[ZbigiMan]

Here is link to webpack sass-loader issue webpack-contrib/sass-loader#556

[krismeister]

If anyone finds this in the short future, until the commits above are merged. I am on:

Angular CLI: 6.2.3
Angular: 6.1.9

Downgrading sass-loader in package.json fixed this issue for me.

  "dependencies": {
        ...
        "sass-loader": "~6.0.7",
        ...

[julkue]

I'm still having this issue in v7. Wasn't it fixed?

[cichacz]

Yea, it looks like it's still there in sass-loader@7.1.0

[shprink]

Same here when upgrading from v6 to Angular v7.

Downgrading sass-loader to 6.0.7 worked for me.

[nyxz]

My workaround was to prefix my style files with my project name abbreviation to avoid naming collusion with libraries inside node_modules. So

src 
   - styles
          - _globals.scss
          - _rxjs.scss

will become

src 
   - styles
          - _asdf-globals.scss
          - _asdf-rxjs.scss

Then the import is:

@import 'asdf-globals';
@import 'asdf-rxjs';

[daverickdunn]

Slight digression: For persons trying to use this in multi-app projects, you need to use the full path to the app (project).

e.g.

"stylePreprocessorOptions": {
    "includePaths": [
        "projects/my_app/src/styles"
    ]
}

Took me a few minutes to realise this...

[angular-automatic-lock-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.}