Use original className in console when using css modules

Question

I am using babel-plugin-react-css-modules. This is my configuration isnide of webpack.

      devtool: 'source-map',
      {
        test: /\.local\.(css|scss)$/,
        use: [
          'style-loader',
          'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap',
          'sass-loader?sourceMap',
          {
            loader: 'sass-resources-loader?sourceMap',
            options: {
              resources: [ path.resolve(__dirname, './src/client/styling/styles/variables.scss'), ],
            },
          },
        ],
      },

Inside of my component when I add something like this

<h2 styleName="feature-one">Feature Scene</h2>

And inside my css file I add this

.feature-one {
   color: red;
 }

Everything works regarding the styles but if I inspect the element this is what I see

It is the generated css module name. Can I somehow map this and show the original class name 'feature-one' when inspecting the element?

Answer 1

You can try devtool: "nosources-source-map".