React项目导入antd/dist/antd.css报错：模块未找到

问题原因 #

Ant Design 5.x 彻底移除了 antd/dist/antd.css 这个全局样式文件，你使用的是Antd 5.2.0，沿用旧版本的导入方式自然会出现模块找不到的报错。5.x默认采用CSS-in-JS方案，组件样式会随组件自动加载，无需手动全局导入全量样式。

解决方案 #

方案1：使用默认的CSS-in-JS（推荐）

直接删除代码中的 import 'antd/dist/antd.css'; 语句，Antd组件的样式会通过CSS-in-JS机制自动注入页面，无需额外操作即可正常应用样式。

方案2：全局引入重置样式（可选）

如果需要统一页面基础样式，可以导入Antd提供的重置样式文件替代旧的全量样式：

import 'antd/dist/reset.css';

这会帮你统一页面的基础排版与样式重置，组件样式依然由CSS-in-JS自动处理。

方案3：手动按需引入组件样式（不推荐）

若偏好手动控制样式加载，可针对单个组件引入对应的样式文件：

// 示例：引入Button组件的样式
import 'antd/es/button/style';

这种方式操作繁琐，官方更推荐使用默认的CSS-in-JS方案。

验证步骤 #

1. 删除原有的import 'antd/dist/antd.css';代码
2. 重启项目，检查Antd组件的样式是否正常渲染
3. 若页面基础样式存在差异，再添加import 'antd/dist/reset.css';语句

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