Angular Проект не удалось скомпилировать с @ angular -builders / custom-webpack в файлах s css

Question

Я использую @ angular -builders / custom-webpack , чтобы расширить компиляцию файлов scss, чтобы использовать post css и плагин post css -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

Я смог расширить пост css -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;
};