角-cli:将sass加载程序配置为在node_modules中包含includePath。

Question

角-cli:1.0.0-β.15

节点: 6.5.0

操作系统: linux x64

我想从bootstrap-material-design v4-dev分支编译scss文件，方法是将它放在angular-cli.json的apps.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",
]

在引导材料设计的文档中，它说要将node_modules放在sass-加载程序的includePath中。

用目前版本的角质cli可以吗？如果是，怎么做？

Answer 1

解决办法

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

Answer 2

不确定你是否有这方面的工作，但任何人谁正在寻找(ng-cli与启动和SCSS)。

请查看此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方法，因为我认为这个文件是针对全局样式的。