How to subscribe css modules rule?

[Guilherme Utzig]

Hello, I need to remove the css generating with a hash on the end of each element.

How can I do that? I already tried just pushing into the rules but still not subscribe, the classes are still generating with hashes.

Code:

config.module.rules.push({
    test: /\.css$/,
    loader: 'css-loader',
    query: {
      modules: true,
      localIdentName: '[name]'
    }
  })

Evidence:

[Luke Edwards]

Hey, are you sure you want to do this? 😸 CSS modules are actually pretty amazing – the ugly hash only shows up for development. For production, the selectors are compressed to much shorter, unique selectors. This will often save bytes on the classnames alone 👍 You can inspect the classNames on https://pwa.cafe for a production example.

As for actually disabling these, you have two options:

1. Wrap everything in :global() modifier. This will tell css-loader to leave these selector as is and not modify the name.

   :global(.gs-header) {
     background: blue;
   }

See here for more info

2. You have to modify the current config & disable modules – instead of adding a new CSS rule that still uses modules (modules: true) but with a different naming convention. The one PWA includes runs first, so yours never gets to run.

Also, simply running unshift() instead of push() won't work either because it adds css-loader without any style-loader or postcss-loader chaining.

 config.module.rules.forEach(rule => {
   if (Array.isArray(rule.use)) {
     rule.use.forEach(obj => {
       if (obj.loader && obj.loader === 'css-loader') {
         obj.options.modules = false; // DISABLE
       }
     });
   }
 });

Hope that helps!

[Guilherme Utzig]

I don't really like to work with hashes on my CSS, but it's a personal thing, nothing more than this hahaha.

Thank you very much for this, solved my problem!!

[Luke Edwards]

Yeah, I can relate 😆 I didn't like CSS modules at all at first, but I've definitely warmed up to them since.

Great! 🙌