的解决方法

Question

angular-cli：1.0.0-beta.15

节点：6.5.0

os：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

角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时执行。位于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

不确定你是否有这个工作，但是对于那些正在寻找这个的人（使用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方法，因为我认为这个文件适用于全局样式。

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

2 个答案:

的解决方法