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

Question

I am using @angular-builders/custom-webpack to extend the compilation of the scss files in order to use postcss and the plugin postcss-modules

Currently, when I try to serve the project these errors are displayed in the terminal:

I think the issue is the component.scss files are being compiled twice, one for the default compiler and the other one by my custom webpack config:

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

Here is the repo of my project:

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

Thanks in advance.

Answer 1

I found the solution.

My issue was how I was extending the postcss-loader , thanks to just-jeb explanation and this example: https://github.com/angular/angular-cli/issues/8427#issuecomment-576263052

I was able to extend the postcss-loader.

Instead of doing:

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

I had to do:

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