Implementing the CSS modules concept in my Angular app has been a challenge due to conflicts with existing frontend CSS. My project utilizes SCSS, and I am looking for a way for webpack to modularize the CSS generated from SCSS during the final build step.
I have attempted to use the CSS loader of webpack to address this issue, but so far I have not been successful.
https://www.npmjs.com/package/@angular-builders/custom-webpack provides tools to customize webpack configurations. I tried the following configuration:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
};
However, it resulted in the following error:
ERROR in Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(1:1) Unknown word
> 1 | exports = module.exports = require("../../../../css-loader/dist/runtime/api.js")(false);
I also attempted to add the CSS loader into the existing webpack configuration:
module.exports = (config, options) => {
const rules = config.module.rules || [];
rules.forEach(rule => {
if (String(rule.test) === String(/\.css$/)) {
rule.use.push({ loader: 'css-loader', options: { modules: true }})
}
});
return config;
};
Despite these efforts, the same error persists. How can I successfully implement CSS modules?
Update 1:
I discovered that Angular uses postcss, which offers similar functionality through a plugin called postcss-modules. However, I am still facing challenges in making it work.