How to obfuscate CSS class names?

[jleei]

e.g.

<div class="container"><div class="row"></div></div>

to:

<div class="j83agx80"><div class="cbu4d94t"></div></div>

change all css class names. Don't know much about the configuration of webpack, is it difficult to implement this function? use Webpack's css-loader?

[fivethreeo]

just rename the name.css -> name.module.css

[jleei]

ok, I tried to override razzle's config, but didn't work.

razzle.config.js:

module.exports = {
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: true,
            importLoaders: 1,
            modules: {
              auto: true,
              localIdentName: '[hash:base64:5]',
            },
          },
          prod: {
            sourceMap: true,
            importLoaders: 1,
            modules: {
              auto: true,
              localIdentName: '[hash:base64:5]',
            },
          },
        },
      },
    },
    'mdx',
  ],
};

changed localIdentName from [name]__[local]___[hash:base64:5] to [hash:base64:5]
but the compiled result was still 'ComponentName-module__name___2Dj4i' format.
What am i doing wrong?

[fivethreeo]

css not postcss

[jleei]

It works. Thanks for your help.

[fivethreeo]

resolved

[n4j1Br4ch1D]

Check out this postcss plugin:
https://www.npmjs.com/package/postcss-obfuscator