reactjs - 使用 css 模块时在控制台中使用原始类名

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