使用css模块时，在控制台中使用原始className

Question

我正在使用babel-plugin-react-css-modules。这是我在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'), ],
            },
          },
        ],
      },

当我添加这样的东西时，我的组件内部

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

在我的css文件中我添加了这个

.feature-one {
   color: red;
 }

一切都与风格有关，但如果我检查元素，这就是我所看到的

它是生成的css模块名称。我可以以某种方式映射这个并在检查元素时显示原始类名'feature-one'吗？

Answer 1

你可以尝试devtool: "nosources-source-map"。