Fails compilation in scss files

Describe the Bug

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: extra-webpack.config.js.

Minimal Reproduction

Here is my project: https://github.com/gquinteros93/angular-css-modules

Expected Behavior

I expect my scss files will be compiled with my custom webpack rule.

Environment

Libs
- @angular/core version: 8.2.0
- @angular-devkit/build-angular version: 0.803.24
- @angular-builders/custom-webpack": "8.2.0"
- @angular-builders/dev-server": "7.3.1"

For Tooling issues:
- Node version: v10.9.0
- Platform:  Mac

[gquinteros93]

Hi @just-jeb , thanks for you help, I follow the same approach as: https://github.com/angular/angular-cli/issues/8427#issuecomment-576263052

And I was able to extend postcss 🎉 : extra-webpack.config.js :

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

Now I need to extend posthtml-loader in order to use posthtml-css-modules to replace the classes names by their corresponding hashed names.

I will research if it possible but If you already know or have an idea about how to do it, it’s more than welcome.

Thanks!!!

[just-jeb]

@gquinteros93

I got the following error:

Yeah sorry I mislead you. You need to use @angular-builders/custom-webpack:dev-server. In any case @angular-builders/dev-server is deprecated.