使用babel-plugin-react-css-modules时，如何在控制台保留CSS Modules原始类名？

嘿，这个需求我太懂了——调试的时候看着一堆哈希类名真的头大，想快速定位到原始的CSS类名确实很有必要。结合你现有的Webpack配置，我给你两个关键的调整步骤：

1. 同步babel-plugin-react-css-modules与css-loader的命名规则 #

首先，你需要确保babel-plugin-react-css-modules的类名生成规则和css-loader完全一致，这样两者才能正确映射，同时让生成的类名里保留原始的类名（你现在的localIdentName已经包含[local]，这很好）。

在你的Babel配置（比如.babelrc或者babel.config.js）里，添加babel-plugin-react-css-modules的配置，指定generateScopedName和css-loader的localIdentName一模一样：

{
  "plugins": [
    [
      "react-css-modules",
      {
        "generateScopedName": "[path]___[name]__[local]___[hash:base64:5]",
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        },
        "webpackHotModuleReloading": true,
        "autoResolveMultipleImports": true
      }
    ]
  ]
}

这里的generateScopedName必须和你css-loader里的完全匹配，这样插件才能正确识别并关联原始类名和生成的哈希类名。

2. 让控制台/DevTools能看到原始类名 #

如果你希望在React DevTools或者控制台打印组件时，能直接看到原始的className，有两个实用的方法：

方法A：给组件自动添加原始类名的data属性 #

你可以手动在组件里添加一个data-original-class属性，把原始的className存进去（或者通过自定义Babel插件自动注入，手动实现更简单直接）：

import styles from './Component.local.scss';

const MyComponent = () => {
  return (
    <div 
      className={styles.myOriginalClass} 
      data-original-class="myOriginalClass"
    >
      {/* 组件内容 */}
    </div>
  );
};

这样在浏览器的Elements面板里，你就能看到这个data属性，直接知道对应的原始类名是什么。

方法B：优化css-loader的命名格式 #

你现在的localIdentName已经包含[local]，生成的类名会是类似src_client_components___MyComponent__myOriginalClass___abc12的格式，从这个类名里你能直接看到原始的myOriginalClass部分。如果觉得这个太长，也可以简化一下规则：

'css-loader?sourceMap&modules&importLoaders=1&localIdentName=[local]___[hash:base64:3]'

调整后生成的类名会变成myOriginalClass___abc，更简洁，同时保留了核心的原始类名信息。

额外提示 #

别忘了安装postcss-scss依赖（因为你使用了SCSS语法），否则babel-plugin-react-css-modules可能无法正确解析你的样式文件：

npm install postcss-scss --save-dev

这样调整之后，不管是在浏览器Elements面板查看生成的类名，还是通过data属性快速定位原始名，调试起来都会轻松很多！

内容的提问来源于stack exchange，提问作者Igor-Vuk