如何解决Ant Design 5.0.3升级后Timepicker导入报错问题？

开发者阿泽

2026-8-9

解决Ant Design 5.0.3升级后找不到'antd/lib/time-picker/style'的错误

这个错误是因为Ant Design 5.x彻底改变了样式引入逻辑和目录结构，不再支持旧版本中antd/lib/xxx/style这类路径的按需引入方式，以下是具体解决步骤：

移除旧的按需引入插件配置
如果你之前使用babel-plugin-import来实现Ant Design组件的按需引入，需要删除babel配置文件（如babel.config.js、.babelrc）中相关配置。比如删除类似下面的代码块：
```
plugins: [
  ['import', { libraryName: 'antd', style: true }]
]
```
Ant Design 5.x默认支持Tree Shaking，无需依赖该插件实现组件按需加载。
修改样式全局引入方式
在项目入口文件（如main.jsx、main.tsx）中，添加Ant Design 5.x的全局样式引入：
```
import 'antd/dist/reset.css';
```
注意5.x不再使用旧版本的antd.css，必须替换为reset.css。
清理代码中手动引入的组件样式
检查项目代码中是否存在类似import 'antd/lib/time-picker/style'的手动引入语句，直接删除这类代码，全局引入reset.css后无需单独引入组件样式。

清理缓存并重新构建
执行缓存清理命令，避免webpack缓存残留旧路径：

# npm 用户
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# yarn 用户
yarn cache clean
rm -rf node_modules yarn.lock
yarn install

之后重新打包项目即可。