Angular 项目在 scss 文件上使用 @angular-builders/custom-webpack 编译失败答案

【问题标题】：Angular Project fails compilation with @angular-builders/custom-webpack on scss filesAngular 项目在 scss 文件上使用 @angular-builders/custom-webpack 编译失败
【发布时间】：2020-04-06 12:43:09
【问题描述】：

我正在使用@angular-builders/custom-webpack 来扩展scss 文件的编译，以便使用postcss 和插件postcss-modules

目前，当我尝试为项目提供服务时，这些错误会显示在终端中：

我认为问题在于 component.scss 文件被编译了两次，一个用于默认编译器，另一个用于我的自定义 webpack 配置：

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.component\.(css|sass|scss)$/,
                exclude: [path.resolve('node_modules'), path.resolve('src/styles.scss')],
                include: [path.resolve('src/app')],
                use: [
                    'raw-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('postcss-modules')({
                                    generateScopedName: "[hash:base64:5]"
                                }),
                                require('postcss-import')
                            ]
                        }
                    },
                    'sass-loader'
                ]
            }
        ]
    }
};

这是我项目的仓库：

https://github.com/gquinteros93/angular-css-modules

提前致谢。

【问题讨论】：

标签： angular webpack angular-cli angular-builder

【解决方案1】：

我找到了解决方案。

我的问题是我如何扩展postcss-loader，感谢just-jeb 解释和这个例子：https://github.com/angular/angular-cli/issues/8427#issuecomment-576263052

我能够扩展 postcss-loader。

而不是做：

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.component\.(css|sass|scss)$/,
                exclude: [path.resolve('node_modules'), path.resolve('src/styles.scss')],
                include: [path.resolve('src/app')],
                use: [
                    'raw-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('postcss-modules')({
                                    generateScopedName: "[hash:base64:5]"
                                }),
                                require('postcss-import')
                            ]
                        }
                    },
                    'sass-loader'
                ]
            }
        ]
    }
};

我必须这样做：

const postcssModules = require('postcss-modules');

module.exports = (config, options) => {

    const scssRule = config.module.rules.find(x => x.test.toString().includes('scss'));
    const postcssLoader = scssRule.use.find(x => x.loader === 'postcss-loader');
    const pluginFunc = postcssLoader.options.plugins;
    const newPluginFunc = function () {
        var plugs = pluginFunc.apply(this, arguments);
        plugs.splice(plugs.length - 1, 0, postcssModules({ generateScopedName: "[hash:base64:5]" }));
        return plugs;
    }
    postcssLoader.options.plugins = newPluginFunc;

    return config;
};

【讨论】：