使用sourceMaps与CSS模块化

Question

我正在使用 babel-plugin-react-css-modules，并且我想要在 css modules 中使用源映射。

我的 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'。当我在控制台中检查时，我得到了这个结果，所以它部分工作。我可以看到样式来自哪个文件。但问题是名称，我希望显示原始的类名，而不是这个长生成的字符串？

- Igor-Vuk

---

我真的不明白...你所说的原始类名是什么意思？你是想让你的Sass在调试器的样式部分中显示吗？ - Panther

我希望在获取className时，不再显示所有生成的CSS模块名称，而只需获取imageRotate。原始的className为.scenes-routeComponents-home-components-___titleComponent-local__container___REuKC .scenes-routeComponents-home-components-___titleComponent-local__imageRotate___R58vw。 - Igor-Vuk

Chrome调试器不够智能，你需要查看使用的库中的解决方案来生成类名。 - Panther

是的，这就是为什么我希望能得到帮助。我还没有找到任何解决方案。它也没有显示出正确的样式行号。 - Igor-Vuk

Answer 1

本地IdentName在css-loader中进行配置。如果您想要仅使用原始类名，可以将css-loader更新为以下内容：

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

localIdentName 的常见描述在 css-loader 中。

如果您正在寻找其他预定义的标记，请查看 loader-utils 的文档（它被 css-loader 使用）。

- Kseniia

---

你能提供一些参考资料/文档吗？ - Raghu Ariga

当然，我已经添加了有关localIdentName是什么以及可以在其中使用哪些标记的有用链接。 - Kseniia

谢谢Ksenia。我知道那个，但那样做就违背了我使用CSS模块的目的。我想生成那个长名称，以便类名不会冲突，并且我可以在每个组件内部使用类名为“button”的类名。如果我只使用[local]，它们将会冲突。我只是想在开发时将它们映射到原始文件名，以便在检查时在控制台中显示。 - Igor-Vuk

Answer 2

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

这是一个惯用的例子：

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

- Slava Fomin II