How to give classes in CSS modules better names?

Question

I have this config in webpack.config.js:

  {
    test: /\.css$/,
    use: [
      {loader: "style-loader"},
      {
        loader: "css-loader",
        options: {
          modules: true,
          importLoaders: 1,
          sourceMap: true
        }
      }
    ]
  }

It works as expected, but the one small thing can be improved - names of classes generated.

Is it possible to, say, add the generated string to the existing class name?

Like this:

// before:
   gSJW8QAdF0l_JiFWFeyjq

// after:
   loginContainer_gSJW8QAdF0l_JiFWFeyjq

Answer 1

Refer to the official docs and look for the section about localIdentName and getLocalIdent. Using that you can completely customize your class name. Cheers!