craco-less搭配less-loader构建失败，降级版本仍未解决

• 执行npm install安装依赖后，运行npm start启动React项目时构建失败
• 错误提示：Module build failed (from ./node_modules/craco-less/node_modules/less-loader/dist/cjs.js)
• 具体错误触发点：antd包内/node_modules/antd/lib/table/style/size.less第53行的语句.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md, @table-font-size-md);触发**"Operation on an invalid type"**错误
• 已尝试将less-loader降级至5.0.0版本，问题未解决

项目package.json配置：

{
  "name": "myProject",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.0.0",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.20.2",
    "@craco/craco": "^7.0.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.8.1",
    "axios": "^0.19.2",
    "babel-preset-react-app": "^9.1.2",
    "connected-react-router": "^6.8.0",
    "craco-less": "^2.0.0",
    "i18next": "^19.7.0",
    "react": "^16.14.0",
    "react-dom": "^16.13.1",
    "react-i18next": "^11.7.2",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^5.0.1",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-loader": "^8.1.0",
    "less-loader": "^11.1.0"
  }
}

核心问题是antd、craco-less、react-scripts和less-loader之间的版本不兼容：旧版antd使用的Less语法在高版本loader中解析异常，降级到5.x的loader又和react-scripts@5.x冲突，需安装匹配的版本组合：

1. 卸载现有less及less-loader

npm uninstall less less-loader

2. 安装兼容版本：针对当前项目依赖，推荐安装less@4.1.3 + less-loader@7.3.0组合

npm install less@4.1.3 less-loader@7.3.0 --save-dev

3. 清理缓存和依赖，重新安装

rm -rf node_modules package-lock.json
npm install

4. 重新启动项目

npm start

5. 若仍有问题，检查craco.config.js配置，确保开启Less的JavaScript支持：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

内容的提问来源于stack exchange，提问作者Amber