Angular 項目在 scss 文件上使用 @angular-builders/custom-webpack 編譯失敗

Question

我正在使用@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

提前致謝。

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