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