Angular CLI 6 自定义 Webpack SCSS 加载器

Question

我正在尝试编写一个自定义的webpack模块，以覆盖或扩展angular 6中使用cli 6构建的当前SCSS构建。我的目的是能够传递一个“品牌”，并将其与任何覆盖匹配，例如“somemodule/'brand'/filename.override.scss”，并替换父文件夹“somemodule/filename.scss”中的文件，但我没有取得任何进展。

设置： "@angular/cli": "6.2.2"，使用 "@angular-builders/custom-webpack": "^2.4.1"

我已更新我的项目构建以反映我正在使用自定义webpack和override/extention的位置。

     "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js"
        },

我的extra-webpack.config.js看起来像这样，只是一个基本的Hello World样式，我在许多网站上都看到过。

module.exports = {
    module:{
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader",
                options: {
                    includePaths: ["src"]
                }
            }]
        }]
    }
};

然而，使用这个运行我的构建

ng run websitename:build

抛出此错误

    Module build failed (from ./node_modules/sass- 

loader/lib/loader.js):

^                                                                                        
  Invalid CSS after "": expected 1 selector or at- 
 rule, was "var content = requi"    

根据我的理解，这可能是在尝试重新定义scss规则时引起的，然而我没有看到任何其他参考来删除此规则。我还尝试了一些完全覆盖旧规则的方法，但没有成功。

我一直专注于解决方案和指南，主要关注以下内容： https://dev.to/meltedspark/customizing-angular-cli-6-buildan-alternative-to-ng-eject-1oc4 https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3a https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object https://github.com/webpack-contrib/sass-loader/blob/master/test/bootstrapSass/webpack.config.js https://github.com/webpack-contrib/sass-loader/issues/536 https://github.com/meltedspark/angular-builders

- Jack Davies

---

我有同样的问题，我没有找到解决方案。 - user2447290

最终我也没能解决这个问题，很抱歉。我最后是在同一个项目中为每个品牌创建了单独的项目。 - Jack Davies

由于某些原因，在 https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object 中，我可以读到 mergeStrategies：webpack 配置合并策略，可以是 append | prepend | replace 每个 webpack 配置条目。默认为 append。也许我们可以尝试获取原始的 webpack 配置，并进行修改以加载热 CSS。 - user2447290

创建 SCSS loader 的意图是什么？你只想用另一个包含特定品牌 CSS 的 SCSS 文件替换当前的 SCSS 文件吗？如果是这样，我可能知道一个解决方案。 - jowey

嘿，有人在这方面有什么好运吗？ - Bruno Bruzzano

Answer 1

我曾遇到相同的问题，尝试过mergeStrategies但无效。我将自定义的webpack改为函数形式，这解决了问题，我成功地扩展了sass选项。

module.exports = function(config) {
    const rules = config.module.rules || [];
    rules.forEach(rule => {
        if (String(rule.test) === String(/\.scss$|\.sass$/)) {
        const loaders = rule.use;
        const transformedLoaders = loaders.map(l => {
            if (l.loader === 'sass-loader') {
                // here you can override options or replace or add.
            } 
            return l;
        });
        rule.use = transformedLoaders;
        }
    });
    return config;
};

- Kishorevarma