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

记录一次使用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.lessAnt 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 的源码中复制该文件内容)。

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

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

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

相关推荐
西洼工作室2 小时前
SSE与轮询技术实时对比演示
前端·javascript·css
IT_陈寒3 小时前
Vite 5.0 性能优化实战:3 个关键配置让你的构建速度提升50%
前端·人工智能·后端
excel4 小时前
Vue2 动态添加属性导致页面不更新的原因与解决方案
前端
GISer_Jing7 小时前
明天好好总结汇总分析博客
前端·javascript·面试
做运维的阿瑞9 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
Dontla11 小时前
Tailwind CSS介绍(现代CSS框架,与传统CSS框架Bootstrap对比)Tailwind介绍
前端·css·bootstrap
yinuo11 小时前
uniapp微信小程序安卓手机Touchend事件无法触发
前端
你的人类朋友13 小时前
【Node】Node.js 多进程与多线程:Cluster 与 Worker Threads 入门
前端·后端·node.js
闲人编程13 小时前
使用Celery处理Python Web应用中的异步任务
开发语言·前端·python·web·异步·celery