webpack - Angular CLI 6 自定义 Webpack SCSS 加载器

Question

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

设置:
@angular/cli": "6.2.2", 有
@angular-builders/custom-webpack": "^2.4.1"

我已经更新了我的项目构建以反射(reflect)我正在使用自定义 webpack，以及覆盖/扩展的位置

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

加载器/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

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