React 16.13.1中启用CSS Modules：已eject后Webpack配置修改

嘿，我来帮你搞定这个问题！既然你已经执行了npm run eject，接下来只需要在webpack.config.js里添加一段专门处理CSS Modules的规则就行，和你现有的普通CSS规则并行配置。

具体修改步骤： #

找到你webpack配置里处理CSS的规则区域，你现在已经有了这段处理普通CSS的代码：

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  }),
},

直接在这段代码后面，添加一个新的规则块，专门识别并处理.module.css结尾的文件：

{
  test: cssModuleRegex,
  use: getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    // 核心配置：启用CSS Modules并设置类名生成规则
    modules: {
      // 开发环境用可读性强的类名，方便调试；生产环境用短哈希压缩体积
      localIdentName: isEnvProduction 
        ? '[hash:base64:8]' 
        : '[name]__[local]--[hash:base64:5]',
    },
  }),
},

关键说明： #

• cssModuleRegex是项目里已经预定义好的正则表达式，专门匹配*.module.css格式的文件，所以这个新规则只会处理这类文件，不会影响普通CSS。
• modules选项是开启CSS Modules的核心，localIdentName用来配置生成的类名格式：开发环境保留原类名和文件名，加个短哈希避免冲突；生产环境直接用哈希值减小文件体积。

使用方式： #

配置完成后，你就可以创建类似Button.module.css的文件，在组件里这样导入使用：

import styles from './Button.module.css';

// 在JSX中使用
<button className={styles.button}>点击我</button>

内容的提问来源于stack exchange，提问作者Vivek Kogilathota