AntD 5.x导入antd.css报错：Module not found问题求助

问题原因 #

你使用的是Ant Design 5.1.0，这个版本彻底移除了antd/dist/antd.css全局样式文件，改用CSS-in-JS默认提供组件样式，所以之前的导入方式会触发文件找不到的错误。

解决方案 #

1. 移除旧的样式导入代码

   • 删除index.js中的import 'antd/dist/antd.css';语句
   • 删除App.css中的@import '~antd/dist/antd.css';语句

2. （可选）自定义主题
   如果需要修改主题样式，使用AntD 5提供的ConfigProvider组件配置：

   // 在App.js中添加配置
   import { ConfigProvider } from 'antd';
   
   function App() {
     const customTheme = {
       token: {
         colorPrimary: '#25b864', // 自定义主色调
         borderRadius: 4,
       },
     };
   
     return (
       <ConfigProvider theme={customTheme}>
         {/* 你的应用所有组件都包裹在这里 */}
         <div className="App">
           {/* ...你的组件代码 */}
         </div>
       </ConfigProvider>
     );
   }
   
   export default App;
   

3. 重启开发服务器
   执行npm start重启项目，AntD组件的样式会通过CSS-in-JS自动注入，无需手动导入全局CSS。

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