Angular-cli: Configure Sass-loader to include node_modules in includePath

[ciesielskico]

angular-cli: 1.0.0-beta.15
node: 6.5.0
os: linux x64

I want to compile the scss file from bootstrap-material-design by putting it in the apps[0].styles[] array but I get the following message:

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./~/bootstrap-material-design/scss/bootstrap-material-design.scss                                               
Module build failed:                                                                                                                                                       
@import "bootstrap/scss/variables"; // from bootstrap node_module                                                                                                          
^                                                                                                                                                                          
      File to import not found or unreadable: bootstrap/scss/variables                                                                                                     
Parent style sheet: /home/ciesielskico/Documents/Git/reports/node_modules/bootstrap-material-design/scss/_variables.scss                
      in /home/ciesielskico/Documents/Git/reports/node_modules/bootstrap-material-design/scss/_variables.scss (line 45, column 1)       
 @ ./~/bootstrap-material-design/scss/bootstrap-material-design.scss 4:14-148                                                                                              
 @ multi styles                              

On their documentation it says to put node_modules in the includePath of the sass-loader.

Is it possible?
If yes, how?

[JanStureNielsen]

@ciesielskico - the issue tracker is for project bugs and project feature requests as noted in CONTRIBUTING.md. For better support, consider creating a question on StackOverflow with all the details.

[dbandstra]

Maybe try prepending "~" to the import path? See here:

https://github.com/jtangelder/sass-loader#imports

[zhenwenc]

What would be the best way to import the common sass/scss helpers (i.e: mixins, variables), instead of importing from like '../../../styles/variables.scss'?

for such use case, scssLoader.includePaths option works great, but how can we configure this settings in angular-cli project?

[filipesilva]

@dbandstra's suggestion of using ~ is the best way of addressing modules in node_modules.

@zhenwenc there is no way currently to include paths.

[dannyk08]

including relative paths is not maintainable.. like @zhenwenc mentioned we could use includePaths for third party library scss mixins.. at the moment I'm having to depend on the file tree to look for node_modules

hope we can fix this.. or if anyone has found a better way of doing things please drop the suggestion

[andreasgrimm]

In my case bootstrap material design tries to import bootstrap variables like this: @import "bootstrap/variables";
Of course I can't modify the regarding file because it's a 3rd party dep. What would you suggest to do in this case if I can't specify importPaths explicitly ?

[adilmughal]

Why the issue is closed when its not resolved?
Like @dannyk08 and @zhenwenc suggested there should be a way to specify it

[PfxMobile]

This is really annoying - what's the problem to expose importPaths ?

[zhenwenc]

Here is what I am currently doing (not perfect, but consider it is a workaround), please let me know if there is any other better solutions:

To import the common sass/scss helpers (i.e: mixins, variables), basically locate it from the root directory to avoid ../../∞/../styles/variables:

@import 'src/assets/styles/variables';
@import 'src/assets/styles/mixins';

To import from 3rd party libraries (addressing modules in node_modules):

@import '~bourbon/app/assets/stylesheets/bourbon';
@import '~bourbon-neat/app/assets/stylesheets/neat';

Hope it helps. :-)

[yogeshgadge]

@filipesilva This ~ forces the other user of the libraries to use webpack or do other webpack.
This was the only way to distribute a reusable library and expose my SASS.
So ~ is not a good solution. Why is it so hard to expose includePath ?

[filipesilva]

@yogeshgadge includePath has been around in the CLI for a while now: https://github.com/angular/angular-cli/wiki/stories-global-styles

[haydenhancock]

I couldn't get the includePaths to work with third-party libraries either. The only way I could get this to work is to use follow @zhenwenc advice. The below includePaths property doesn't work.

"stylePreprocessorOptions": {
        "includePaths": [ "./node_modules/node-neat/node_modules/bourbon-neat/core" ]
      },

I still receive a "File to import not found or unreadable: neat." In my styles.scss, I am using the following import statement:

@import "neat";

[yogeshgadge]

@haydenhancock Try this and make sure it is inside apps:[{

  "stylePreprocessorOptions": {
    "includePaths": [
      ".",
      "../node_modules"
    ]
  },

and the import as

@import "bourbon-neat/core/neat"

[haydenhancock]

@yogeshgadge This didn't work for me.

File to import not found or unreadable: bourbon-neat/core/neat.

The following did work for me though:

"stylePreprocessorOptions": {
    "includePaths": [ "../node_modules/node-neat/node_modules/bourbon-neat/core" ]
 },

and the import as:

@import "neat";

[ohcibi]

I had the same with bootstrap 4's sass files. The error in the build output shows that it is looking for the sass modules in $PROJECT/src/~ when it should look in $PROJECT/~. Prepending .. in includePaths fixes that. This should be added to the documentation. I'd PR but I don't know how to contribute to wikis.

[pro100skm]

This is really annoying - what's the problem to expose importPaths ?

please read comments above why

[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._}