Используйте оригинальный className в консоли при использовании модулей CSS

Question

Я использую babel-plugin-реагировать-css-модули. Это моя конфигурация в веб-пакете.

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