Angular custom webpack config enable CSS modules

Question

I'm trying to apply CSS modules concept agains my angular app, to order embed it into existing frontend with CSS which unfortunately overlaps. My project uses scss, I want webpack "modulize" my CSS after CSS if formed from scss on last build step I think.

I want to use CSS loader of webpack to achieve this.
But I couldn't make it work.

https://www.npmjs.com/package/@angular-builders/custom-webpack to order customize my webpack config. I've tried to apply the next configuration

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  },
};

and got this 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've tried to find and add css loader into existing

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

Getting the same error. How to make it work?

Update 1:

I found that angular uses postcss which also provides this functionality as a plugin, postcss-modules. Also still can't make it work.

German Quinteros · Accepted Answer · 2020-07-22 22:20:15Z

2

I was able to implement CSS Modules in Angular with the help of @angular-builders/custom-webpack as you suggested.

However, my solution use postcss-modules and posthtml-css-modules instead of the css-loader to hash the styles.

postcss-modules hash all the styles, then posthtml-css-modules replaces the class names on the html files by the hashed class names.

I documented my solution here:

Live Demo: https://angular-css-modules.herokuapp.com/
Github Repo: https://github.com/gquinteros93/angular-css-modules
Article with the step by step: https://indepth.dev/angular-css-modules/

I hope it will be useful for you.

answered Jul 22, 2020 at 22:20

German Quinteros

1,9401 gold badge12 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Parloti Over a year ago

Not working anymore.

Collectives™ on Stack Overflow

Angular custom webpack config enable CSS modules

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related