Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.

这是我最开始的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 的源码中复制该文件内容）。

改完不要忘了重新下载依赖包！

Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.

下面是这个错误的解释：

1. 核心原因：antd 版本与引用路径不匹配

2. 具体解决步骤

1. 核心原因：`antd` 版本与引用路径不匹配