【问题标题】：angular-cli: Configure sass-loader to include node_modules in includePathangular-cli：配置 sass-loader 以在 includePath 中包含 node_modules
【发布时间】：2017-01-30 20:24:20
【问题描述】：

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 可以吗？如果是，怎么做？

【问题讨论】：

标签： angular angular-cli

【解决方案1】：

不确定您是否可以使用此功能，但对于正在寻找此功能的任何人（带有 Bootstrap 和 SCSS 的 ng-cli）。

请查看此SO question 并将预处理器默认样式扩展名设置为scss。

Node-sass 或任何其他加载程序不需要安装。它与默认扩展的小修改一起工作。

然后您可以将引导样式添加为styles.scss 中的导入。（只需更改默认styles.css的扩展名）

styles.scss

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

也可以将其添加到app.component.ts 作为styleUrls: ['./app.component.css', '../../node_modules/bootstrap/scss/bootstrap.scss'] 并将encapsulation: ViewEncapsulation.None 添加到组件注释以全局应用引导程序。

我更喜欢 styles.scss 方法，因为我认为这个文件是为全局样式设计的。

【讨论】：

我认为您可以使用以下符号来引用 node_modules 中的 scss：@import "~bootstrap/scss/bootstrap.scss";
但是我们应该如何引用 index.xml 中生成的 css 来加载它呢？

【解决方案2】：

解决方法

我编写了一个节点脚本，它作为 npm post install 执行。位于node_modules/angular-cli/models/ 的文件webpack-build-production.js 和webpack-build-development.js 应包含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');
  }
});

【讨论】：