Class names are hashed values or random characters

[nolanlocke]

I have a file main.scss, it has the following sass
md-chips.md-chips { padding: 0 0 3px 3px; }

Once it compiles it comes out to md-chips._1hUKVVrEWX03XfZGvyCZ-M { padding: 0 0 3px 3px; }

Here is my webpack.config.js rule

{
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
      use: [
          {
              loader: 'typings-for-css-modules-loader',
              options: {
                  modules: true,
                  namedExport: true,
                  camelCase: true,
                  sourceMap: true
              }
          },
          {
              loader: 'sass-loader',
              options: {
                  sourceMap: true,
                  namedExport: true
              }
          }]
  })
}

I'm using webpack 3.6.0, i'm unsure if it is not supported here or if it could be something else?

[timse]

i need to have a look - been kind of out of the loop for a while.
but my assumption would be that you must use just a class definition?
as in .md-chips instead of md-chips.md-chips

[maiorano84]

I ran into this as well and it took me a bit to figure out. This is not the fault of typings-for-css-modules-loader, but rather how the CSS Modules spec operates on the base CSS Loader.

Because you have modules set to true, all of your classes are converted over to a unique hash. While I personally don't care to leverage this behavior yet myself, there are a number of reasons why this might be desirable

Comment out or set modules to false, and you should be all set.

[McBen]

@maiorano84
you're right but it leads to:
Typings for CSS-Modules: option modules is not active - skipping extraction work...

[dl748]

What i did to fix this is

options: {
  module: true,
  localIdentName: is_dev_mode?"[local]-[hash]":null
}

you can also use getIdentName function option to customize the name if needed

this will give you "originalclassname-hashofclass"