Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.
记录一次使用Ant Design Pro框架时出现的bug
这是我最开始的package.json版本，然后执行npm run build(max build) 打包时会报上面的错误
{"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-layout4.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 的源码中复制该文件内容）。
改完不要忘了重新下载依赖包！
改完不要忘了重新下载依赖包！
改完不要忘了重新下载依赖包！