本地执行sudo yarn build构建React应用失败：each函数未定义

我在本地执行sudo yarn build构建团队的React应用时失败，报错指向antd库的Less文件。

构建错误输出 #

➜  nova-web git:(feature/tech-improvement-1204122945262264) ✗ sudo yarn build
yarn run v1.22.19
$ node --max-old-space-size=4096 scripts/build.js
Creating an optimized production build...
Failed to compile.

./node_modules/antd/lib/input-number/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/@nodeworks/antd-scss-theme-plugin/build/dist/lib/antdLessLoader.js??ref--6-oneOf-8-2!./node_modules/antd/lib/input-number/style/index.less)

each(@input-number-wrapper-cls, {
^
Function 'each' is undefined
      in /Users/apple/Documents/projects/nova-web/node_modules/antd/lib/input-number/style/status.less (line 7, column 0)


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

项目关键依赖版本 #

• antd: ^4.7.2
• less-loader: ^5.0.0
• @nodeworks/antd-scss-theme-plugin: ^2.0.3
• antd-scss-theme-plugin: ^1.0.8

解决方案 #

1. 升级Less版本以支持each函数 #

Less的each内置函数在3.7.0版本才被引入，当前项目依赖的Less版本可能低于此要求。执行以下命令更新：

yarn add less@^3.7.0 --dev

2. 清理重复的主题插件 #

项目同时安装了antd-scss-theme-plugin和@nodeworks/antd-scss-theme-plugin，两者功能冲突。保留维护更活跃的@nodeworks版本，卸载旧插件：

yarn remove antd-scss-theme-plugin

3. 修改antd样式导入方式 #

如果主题插件配置问题无法快速解决，可直接改用CSS样式导入：

• 将项目中类似import 'antd/lib/input-number/style';的代码替换为：

  import 'antd/lib/input-number/style/css';
  

• 若使用babel-plugin-import，修改配置为：

  {
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "style": "css"
      }]
    ]
  }
  

4. 升级less-loader到兼容版本 #

当前webpack版本为4.x，可升级less-loader到6.x版本（兼容webpack4）：

yarn add less-loader@^6.2.0 --dev

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