Create React App项目安装babel-plugin-react-css-modules后的配置步骤咨询

我明白你的需求：既要用上Ant Design的全局样式，又想在自己的组件里用styleName语法实现CSS Modules的样式隔离，而且已经装好了babel-plugin-react-css-modules插件。下面是一步步的具体配置流程——因为create-react-app默认把配置封装起来了，我们得用工具来自定义配置：

1. 安装辅助配置工具 #

由于create-react-app不允许直接修改babel配置，我们需要用react-app-rewired和customize-cra来覆盖默认配置，执行以下命令：

npm install react-app-rewired customize-cra --save-dev

2. 修改package.json的脚本命令 #

把原来的start、build、test命令替换为react-app-rewired开头的版本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject" // 这个命令保留原样，后续如果想完全释放配置可以用它
}

3. 创建并配置自定义覆盖文件 #

在项目根目录新建config-overrides.js文件，写入以下配置内容：

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin([
    'react-css-modules',
    {
      // 配置你项目中使用的样式文件扩展名，比如.css、.scss等
      filetypes: {
        '.css': {
          syntax: 'postcss'
        }
      },
      // 关键配置：排除node_modules目录，确保Ant Design的全局样式不会被CSS Modules处理
      exclude: 'node_modules',
      // 可选：自定义生成的CSS Modules类名格式，默认是[path]-[name]-[local]-[hash:base64:5]
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      // 启用styleName属性作为CSS Modules的标记
      attributeNames: {
        styleName: 'styleName'
      }
    }
  ])
);

4. 安装并引入Ant Design #

先安装Ant Design核心依赖：

npm install antd --save

然后在项目入口文件（比如src/index.js）中引入Ant的全局样式文件：

import 'antd/dist/antd.css'; // 引入全局样式后，Ant组件就能正常显示默认样式了

5. 项目中使用styleName的示例 #

现在你可以在自己的组件里这样写：
比如创建src/components/MyComponent.js：

import React from 'react';
import './MyComponent.css'; // 引入组件专属样式文件

const MyComponent = () => {
  return (
    <div styleName="container">
      <h1 styleName="title">我是用styleName的自定义组件</h1>
      <button styleName="btn">自定义按钮</button>
      {/* Ant组件直接使用className，样式不受CSS Modules影响 */}
      <button className="ant-btn ant-btn-primary">Ant Design按钮</button>
    </div>
  );
};

export default MyComponent;

对应的MyComponent.css：

.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.title {
  color: #1890ff;
}

.btn {
  padding: 8px 16px;
  border: none;
  background-color: #52c41a;
  color: white;
  border-radius: 4px;
}

6. 验证运行 #

执行npm start启动项目，检查两点：

• Ant Design组件的样式是否正常显示
• 自定义组件中styleName对应的样式是否正确应用（可以打开浏览器开发者工具，查看元素的类名是否符合你配置的生成格式）

额外注意事项 #

• 如果项目使用SCSS/SASS，需要在filetypes中添加.scss配置，同时安装postcss-scss依赖
• 不要把Ant Design的样式文件重命名为.module.css，否则会被CSS Modules处理，导致样式失效
• 如果遇到样式冲突，可以调整generateScopedName的格式，避免和Ant的类名重复

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