记录一次使用Ant Design Pro框架时出现的bug
这是我最开始的_package.json_版本，然后执行npm run build(max build) 打包时会报上面的错误
1{ 2 "name": "ant-design-pro", 3 "version": "6.0.0", 4 "private": true, 5 "description": "An out-of-box UI solution for enterprise applications", 6 "repository": "[email protected]:ant-design/ant-design-pro.git", 7 "scripts": { 8 "analyze": "cross-env ANALYZE=1 max build", 9 "biome:lint": "npx @biomejs/biome lint", 10 "build": "max build", 11 "deploy": "npm run build && npm run gh-pages", 12 "dev": "npm run start:dev", 13 "gh-pages": "gh-pages -d dist", 14 "jest": "jest", 15 "lint": "npm run biome:lint && npm run tsc", 16 "lint-staged": "lint-staged", 17 "openapi": "max openapi", 18 "prepare": "husky", 19 "preview": "npm run build && max preview --port 8000", 20 "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login", 21 "serve": "umi-serve", 22 "start": "cross-env UMI_ENV=dev max dev", 23 "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev", 24 "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev", 25 "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev", 26 "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev", 27 "test": "jest", 28 "test:coverage": "npm run jest -- --coverage", 29 "test:update": "npm run jest -- -u", 30 "tsc": "tsc --noEmit" 31 }, 32 "browserslist": [ 33 "defaults" 34 ], 35 "dependencies": { 36 "@ant-design/icons": "^4.6.1", 37 "@ant-design/pro-components": "^2.7.19", 38 "@ant-design/pro-field": "^3.1.0", 39 "@ant-design/pro-layout": "^6.22.7", 40 "@ant-design/v5-patch-for-react-19": "^1.0.3", 41 "@umijs/max": "^4.5.0", 42 "antd": "^5.27.4", 43 "antd-style": "^3.0.0", 44 "classnames": "^2.5.1", 45 "dayjs": "^1.11.13", 46 "max": "^0.0.1", 47 "rc-field-form": "^2.7.0", 48 "react": "^19.0.0", 49 "react-dom": "^19.0.0", 50 "umi-presets-pro": "^2.0.3" 51 }, 52 "devDependencies": { 53 "@ant-design/pro-cli": "^3.2.2", 54 "@biomejs/biome": "^2.0.6", 55 "@commitlint/cli": "^19.5.0", 56 "@commitlint/config-conventional": "^19.5.0", 57 "@testing-library/dom": "^10.4.0", 58 "@testing-library/react": "^16.0.1", 59 "@types/express": "^5.0.3", 60 "@types/jest": "^30.0.0", 61 "@types/lodash": "^4.17.10", 62 "@types/node": "^24.0.10", 63 "@types/react": "^18.0.33", 64 "@types/react-dom": "^18.0.11", 65 "@types/react-helmet": "^6.1.11", 66 "cross-env": "^7.0.3", 67 "express": "^4.21.1", 68 "gh-pages": "^6.1.1", 69 "husky": "^9", 70 "jest": "^30.0.4", 71 "jest-environment-jsdom": "^29.7.0", 72 "less": "^4.4.1", 73 "lint-staged": "^13.2.0", 74 "mockjs": "^1.1.0", 75 "prettier": "^2.8.7", 76 "prettier-plugin-organize-imports": "^3.2.2", 77 "prettier-plugin-packagejson": "^2.4.3", 78 "ts-node": "^10.9.2", 79 "typescript": "^5.0.3" 80 }, 81 "engines": { 82 "node": ">=20.0.0" 83 } 84} 85
后来改了下图中的两处成功修复了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-layout4.x 以下版本），这些组件依赖 4.x 的 less 主题文件，与 5.x 冲突。→ 解决方案：将@ant-design/pro-layout等 Pro 组件升级到支持 antd 5.x 的版本（通常是^7.0.0以上）：
bash -
1undefined
* 如果是 `4.x`（如 `"antd": "^4.0.0"`）：可能是依赖安装不完整，直接执行步骤 2 重新安装。 - 如果是
步骤 2：重新安装依赖，修复可能的安装损坏
删除现有依赖和缓存，重新安装：
bash
1# 1. 删除 node_modules 和锁文件 2rm -rf node_modules package-lock.json yarn.lock # Windows 用 rmdir /s node_modules 等 3 4# 2. 清除 npm 缓存（可选） 5npm cache clean --force 6 7# 3. 重新安装依赖 8npm install # 或 yarn install 9
步骤 3：检查 Less 路径解析配置（针对自定义配置项目）
如果项目中自定义了 webpack 或 Umi 的 Less 配置，可能是 ~ 符号（表示 node_modules）没有被正确解析。
- 对于 Umi 项目，确保
config/config.ts中没有错误覆盖 Less 配置，默认配置通常会自动处理~路径。 - 对于原生 webpack 项目，检查
less-loader配置，确保javascriptEnabled: true且支持~解析：
javascript
运行
1// webpack.config.js 中 less-loader 配置 2module.exports = { 3 module: { 4 rules: [ 5 { 6 test: /\.less$/, 7 use: [ 8 // ...其他 loader 9 { 10 loader: 'less-loader', 11 options: { 12 lessOptions: { 13 javascriptEnabled: true, // 必须开启 14 paths: [path.resolve(__dirname, 'node_modules')], // 确保包含 node_modules 15 }, 16 }, 17 }, 18 ], 19 }, 20 ], 21 }, 22};
步骤 4：临时规避（如果急需运行项目）
如果以上步骤无效，且确认使用 antd 4.x，可以手动创建缺失的路径（不推荐长期使用，但可临时测试）：在 node_modules/antd/es/style/themes/ 下创建 index.less，内容为空（或从 antd 4.x 的源码中复制该文件内容）。
改完不要忘了重新下载依赖包！
改完不要忘了重新下载依赖包！
改完不要忘了重新下载依赖包！
《Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.》 是转载文章，点击查看原文。
