使用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"。