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

Question

我正在使用@angular-builders/custom-webpack to extend the compilation of the scss files in order to use postcss and the plugin 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

提前致谢。

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

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

Angular Project fails compilation with @angular-builders/custom-webpack on scss files

angular

webpack

angular-cli

angular-builder