angular-cli: Configure sass-loader to include node_modules in includePath

Question

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 v4-dev branch by putting it in the apps[0].styles[] array of angular-cli.json but I get the following error:

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

angular-cli.json

"styles": [
                "../node_modules/bootstrap/scss/bootstrap-flex.scss",
                "../node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss",
]

On bootstrap-material-design's documentation it says to put node_modules in the includePath of the sass-loader.

Is it possible with the current version of angular-cli? If yes, how?

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

workaround

I've written a node script that is executed as npm post install. Files webpack-build-production.js and webpack-build-development.js located at node_modules/angular-cli/models/ should contain sassLoader entity and following script will append it automaticly.

var fs = require('fs');

const FILES = [
  "node_modules/angular-cli/models/webpack-build-production.js",
  "node_modules/angular-cli/models/webpack-build-development.js"
];

const ADDITIONAL_LINES = "\
        ,sassLoader: {\n\
            includePaths: [path.resolve(\"node_modules/bootstrap-sass/assets/stylesheets\")]\n\
        }\n\
    };\n";


FILES.forEach(function (file) {
  var text = fs.readFileSync(file, "utf8");
  var alreadyEdited = false;
  var content = "";

  text.split(/\r?\n/).forEach(function (line) {
    if (line.indexOf('sassLoader') !== -1) {
      alreadyEdited = true;
    }

    if (line.indexOf(' };') !== -1) {
      content += ADDITIONAL_LINES;
    } else {
      content += line + "\n";
    }
  });

  if (!alreadyEdited) {
    console.log('File is being adjusted by fix script. ', file);
    fs.writeFileSync(file, content, 'utf8');
  }
});

score 0 · Answer 2 · edited May 23 '17 at 11:46

Not sure if you've got this working but for anyone who is looking for this (ng-cli with Bootstrap and SCSS).

Please have a look at this SO question and set the preprocessor default style extension to scss.

Node-sass or any other loader is not required to install. It's working with the small modification of the default extension.

Then you can add the bootstrap style as an import in styles.scss. (just change extension of the default styles.css)

styles.scss

@import "../node_modules/bootstrap/scss/bootstrap.scss";

It's also possible to add it to app.component.ts as styleUrls: ['./app.component.css', '../../node_modules/bootstrap/scss/bootstrap.scss'] and add encapsulation: ViewEncapsulation.None to component annotation to apply bootstrap globally.

I prefer the styles.scss approach because I think this file is intended for global styles.

I think you could use the following notation to refer to scss in the node_modules: `@import "~bootstrap/scss/bootstrap.scss";` — Gabriel Kohen, Mar 23 '17 at 20:24
but how should we to refer to the generated css in the index.xml in order to load it? — Cristiano, Jun 18 '17 at 01:05

angular-cli: Configure sass-loader to include node_modules in includePath

2 Answers2

workaround