将sourceMaps与CSS模块一起使用

Question

我正在使用babel-plugin-react-css-modules，我想使用带有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'),
              ],
            },
          },
        ],
      },

所以我在我的webpack配置中添加sourceMaps它们正在工作。我也在设置devtool: 'source-map'当我在我的控制台内部进行检查时，我得到了这个，所以它正在部分工作。我可以看到样式是什么文件。但问题是名称，我想要显示原始类名，而不是这个长生成的字符串？

Answer 1

此长名称由css-loader中的localIdentName配置。为了只拥有原始类名，您可以将css-loader更新为：

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

localIdentName的常见描述位于css-loader

如果您正在寻找其他预定义令牌，请检查documentation for loader-utils（由css-loader使用）

Answer 2

我不确定是否可以直接使用源地图在Google Chrome中实现，但是您可以在开发和生产中使用不同的localIdentName。

这是惯用的例子：

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