Webpack css-loader开启modules:true时CSS样式不生效的问题

我来帮你一步步排查这个问题，CSS Modules没生效通常是配置或依赖的小细节出了问题，下面是常见的原因和解决办法：

1. 先确认关键依赖是否安装完整 #

首先检查你有没有装style-loader和css-loader这两个核心loader，漏装的话直接会导致CSS处理失效：

npm install style-loader css-loader --save-dev

2. 调整webpack配置，区分模块CSS和全局CSS #

你当前的webpack规则会把所有.css文件都当成模块处理，但项目里的Ant Design样式是全局的，这样会导致全局样式被模块化失效，同时也可能干扰你的自定义模块样式。正确的做法是分开配置：

// webpack.config.js
module.exports = {
  // ...其他基础配置（entry、output等）
  module: {
    rules: [
      // 专门处理带.module.css后缀的CSS模块文件
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // 启用CSS模块化
              // 可选：自定义生成的类名格式，方便调试时识别
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        ]
      },
      // 处理全局CSS（排除.module.css文件）
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 别忘了添加TypeScript的loader配置
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

3. 给TypeScript添加CSS模块的类型支持 #

因为你用的是TS，需要告诉它如何识别.module.css的导入，否则可能出现类型报错（虽然不影响运行，但可能导致导入逻辑异常）：

• 在src目录下创建global.d.ts文件，内容如下：

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

• 确保tsconfig.json的include字段包含了这个声明文件，比如设置为["src/**/*"]

4. 调试确认CSS是否被正确处理 #

打开浏览器开发者工具，查看你的<div>元素的class属性：

• 如果看到类似styles_mainContent__xxxxxx的哈希类名，说明webpack已经正确处理了CSS模块，这时可以暂时移除<Button>组件，只保留<h1>测试颜色是否生效，排除Antd样式覆盖的可能。
• 如果还是显示原始的mainContent类名，说明webpack没匹配到你的CSS模块文件，要检查配置里的test规则是否正确，或者有没有其他优先级更高的规则覆盖了当前配置。

5. 清除缓存重试 #

有时候webpack的缓存会导致修改不生效，可以尝试删除node_modules/.cache目录（如果用了webpack-dev-server），或者直接重启开发服务。

内容的提问来源于stack exchange，提问作者Heshan Andrews