记录一次使用Ant Design Pro框架时出现的bug


这是我最开始的package.json 版本,然后执行npm run build(max build) 打包时会报上面的错误
javascript
{
"name": "ant-design-pro",
"version": "6.0.0",
"private": true,
"description": "An out-of-box UI solution for enterprise applications",
"repository": "git@github.com:ant-design/ant-design-pro.git",
"scripts": {
"analyze": "cross-env ANALYZE=1 max build",
"biome:lint": "npx @biomejs/biome lint",
"build": "max build",
"deploy": "npm run build && npm run gh-pages",
"dev": "npm run start:dev",
"gh-pages": "gh-pages -d dist",
"jest": "jest",
"lint": "npm run biome:lint && npm run tsc",
"lint-staged": "lint-staged",
"openapi": "max openapi",
"prepare": "husky",
"preview": "npm run build && max preview --port 8000",
"record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
"serve": "umi-serve",
"start": "cross-env UMI_ENV=dev max dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
"start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
"start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
"start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
"test": "jest",
"test:coverage": "npm run jest -- --coverage",
"test:update": "npm run jest -- -u",
"tsc": "tsc --noEmit"
},
"browserslist": [
"defaults"
],
"dependencies": {
"@ant-design/icons": "^4.6.1",
"@ant-design/pro-components": "^2.7.19",
"@ant-design/pro-field": "^3.1.0",
"@ant-design/pro-layout": "^6.22.7",
"@ant-design/v5-patch-for-react-19": "^1.0.3",
"@umijs/max": "^4.5.0",
"antd": "^5.27.4",
"antd-style": "^3.0.0",
"classnames": "^2.5.1",
"dayjs": "^1.11.13",
"max": "^0.0.1",
"rc-field-form": "^2.7.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"umi-presets-pro": "^2.0.3"
},
"devDependencies": {
"@ant-design/pro-cli": "^3.2.2",
"@biomejs/biome": "^2.0.6",
"@commitlint/cli": "^19.5.0",
"@commitlint/config-conventional": "^19.5.0",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.0.1",
"@types/express": "^5.0.3",
"@types/jest": "^30.0.0",
"@types/lodash": "^4.17.10",
"@types/node": "^24.0.10",
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"@types/react-helmet": "^6.1.11",
"cross-env": "^7.0.3",
"express": "^4.21.1",
"gh-pages": "^6.1.1",
"husky": "^9",
"jest": "^30.0.4",
"jest-environment-jsdom": "^29.7.0",
"less": "^4.4.1",
"lint-staged": "^13.2.0",
"mockjs": "^1.1.0",
"prettier": "^2.8.7",
"prettier-plugin-organize-imports": "^3.2.2",
"prettier-plugin-packagejson": "^2.4.3",
"ts-node": "^10.9.2",
"typescript": "^5.0.3"
},
"engines": {
"node": ">=20.0.0"
}
}
后来改了下图中的两处成功修复了bug,改完不要忘了重新下载依赖包

下面是这个错误的解释:
这个错误是 Less 解析器找不到 antd 的主题文件 导致的,通常和 antd
版本不兼容、依赖安装不完整或路径解析配置有关。按以下步骤解决:
1. 核心原因:antd
版本与引用路径不匹配
~antd/es/style/themes/index.less
是 Ant Design 4.x 版本 中的主题文件路径。如果你的项目中安装的是 Ant Design 5.x,这个路径会被移除(5.x 改用 CSS-in-JS,不再有这个 less 文件),从而导致找不到文件。
2. 具体解决步骤
步骤 1:检查 antd
版本是否兼容
-
打开
package.json
,查看antd
的版本:-
如果是
5.x
(如"antd": "^5.0.0"
):你的项目可能混用了 Ant Design 4.x 的组件库 (如@ant-design/pro-layout
4.x 以下版本),这些组件依赖 4.x 的 less 主题文件,与 5.x 冲突。→ 解决方案 :将@ant-design/pro-layout
等 Pro 组件升级到支持 antd 5.x 的版本(通常是^7.0.0
以上):bash
npm install @ant-design/pro-layout@latest # 或 yarn add ...
- 如果是
4.x
(如"antd": "^4.0.0"
):可能是依赖安装不完整,直接执行步骤 2 重新安装。
-
步骤 2:重新安装依赖,修复可能的安装损坏
删除现有依赖和缓存,重新安装:
bash
# 1. 删除 node_modules 和锁文件
rm -rf node_modules package-lock.json yarn.lock # Windows 用 rmdir /s node_modules 等
# 2. 清除 npm 缓存(可选)
npm cache clean --force
# 3. 重新安装依赖
npm install # 或 yarn install
步骤 3:检查 Less 路径解析配置(针对自定义配置项目)
如果项目中自定义了 webpack 或 Umi 的 Less 配置,可能是 ~
符号(表示 node_modules)没有被正确解析。
-
对于 Umi 项目,确保
config/config.ts
中没有错误覆盖 Less 配置,默认配置通常会自动处理~
路径。 -
对于原生 webpack 项目,检查
less-loader
配置,确保javascriptEnabled: true
且支持~
解析:javascript
运行
// webpack.config.js 中 less-loader 配置 module.exports = { module: { rules: [ { test: /\.less$/, use: [ // ...其他 loader { loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true, // 必须开启 paths: [path.resolve(__dirname, 'node_modules')], // 确保包含 node_modules }, }, }, ], }, ], }, };
步骤 4:临时规避(如果急需运行项目)
如果以上步骤无效,且确认使用 antd 4.x,可以手动创建缺失的路径(不推荐长期使用,但可临时测试):在 node_modules/antd/es/style/themes/
下创建 index.less
,内容为空(或从 antd 4.x 的源码中复制该文件内容)。
改完不要忘了重新下载依赖包!
改完不要忘了重新下载依赖包!
改完不要忘了重新下载依赖包!