Reactjs 将sourceMaps与CSS模块一起使用

我正在使用babel插件反应css模块，我想使用css模块的源地图

我的webpack.config.js如下所示

{
        test: /\.local\.(css|scss)$/,
        use: [
          'style-loader?sourceMap',
          'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'postcss-loader?sourceMap',
          'sass-loader?sourceMap',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [
                /* uncomment for import of Bootstrap variables and mixins */
                // path.resolve(__dirname, './node_modules/bootstrap/scss/_variables.scss'),
                // path.resolve(__dirname, './node_modules/bootstrap/scss/_mixins.scss'),
                path.resolve(__dirname, './src/client/assets/styles/variables.scss'),
              ],
            },
          },
        ],
      },

因此，我在我的网页配置中添加sourceMaps，只要它们在工作。我还设置了

devtool:“源代码映射”

当我在控制台内检查时，我得到了这个，所以它部分工作正常。我可以从哪个文件中看出它的风格。但问题是名称，我希望显示原始类名，而不是生成的长字符串

---

此长名称由css加载器中的localIdentName配置。为了只使用原始类名，您可以将css加载程序更新为：

  'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[local]',

localIdentName的常见描述位于

---

如果您正在寻找其他预定义标记，请检查（css加载器使用的）

我不确定是否可以直接使用源代码映射在Google Chrome中实现，但您可以在开发和生产中使用不同的

localIdentName

下面是一个惯用的例子：

localIdentName: (isProduction
  ? '[contenthash]' // using obfuscated hashnames in production
  : '[path][name]__[local]' // using more readable class names during development
),

---

我真的不明白。。你说的原始类名是什么意思？你的意思是你想在调试器的样式部分显示你的sass？？我不想让它显示出来。场景routeComponents home components-\uuuuuuuuu titleComponent-local\uuuuuuuuu container\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu足够聪明。。你必须研究你用来生成类名的库中的解决方案。是的，这就是为什么我要寻求帮助。我还没有找到任何解决办法。你能提供一些参考/文档吗？我已经添加了一些有用的链接，介绍了什么是localIdentName以及可以使用什么标记。谢谢Ksenia。我知道这一点，但这违背了我使用CSS模块的目的。我想生成那个长名称，这样类名就不会冲突，我可以在每个组件中都有一个名为“button”的类名。如果我只使用[本地]，它们将发生冲突。我只是想在开发时将它们映射到原始文件名，以便在检查控制台时显示出来。