angular-cli:配置 sass-loader 以在 includePath 中包含 node_modules

Question

Angular -cli: 1.0.0-beta.15

节点:6.5.0

操作系统:Linux x64

我想从 bootstrap-material-design v4-dev 分支编译 scss 文件，方法是将它放在 angular-cli.json 的 apps[0].styles[] 数组中 但出现以下错误:

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",
]

在 bootstrap-material-design 的文档中，它说将 node_modules 放在 sass-loader 的 includePath 中。

当前版本的 angular-cli 是否可行？ 如果是，如何？

Answer 1

解决方法

我已经编写了一个作为 npm 安装后执行的节点脚本。位于 node_modules/angular-cli/models/ 的文件 webpack-build-production.js 和 webpack-build-development.js 应该包含 < strong>sassLoader 实体和以下脚本将自动附加它。

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');
  }
});