less版本太低引起的报错

Function ‘each’ is undefined

./node_modules/antd4/es/input/style/index.less
Module build failed:
each(@input-wrapper-cls, {
Function ‘each’ is undefined in /node_modules/antd4/es/input/style/status.less
image.png

less each函数是在v3.7.0开始生效，该项目安装的less版本低于该版本，所以无法生效
解决
yarn add less@3.7.1

Detected that you are using injectBabel,

Detected that you are using injectBabel, please use polyfill field, Visit https://ice.work/docs/guide/basic/build.
info 自定义 antd 组件主题变量： ‘@success-color’: ‘#1e8e3e’,
ERR! webpack compile error
解决方案：
https://github.com/ant-design/ant-motion/issues/44

原因：less语法问题，安装低版本的 less

  1. 出现问题的脚手架
  2. dva
  3. create-react-app
    1. npm install less@2.7.3 less-loader@4.1.0 -D
    有可能是less的问题
    “less”: “^2.7.3”, “less-loader”: “^4.1.0”
    把less版本降到3.0以下，实测可解决问题

降低less版本的方法有效，降低到3.0以下（不用降低less-loader的版本）
降低less版本的方法有效，降低到3.0以下
降低less版本的方法有效，降低到3.0以下
image.png
以上方法，针对 antd3x有效，
antd4x less会报错 ，Each的错误，修改 less为4.x

  1. "less": "^4.1.2",
  2. "less-loader": "^4.1.0",

Error evaluating function unit

  1. ERR! (undefined) ./node_modules/antd/es/select/style/index.less
  2. ERR!       transition: all 0.3s;
  3. ERR!       .iconfont-size-under-12px(10px);
  4. ERR! Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?
  5. ERR!       Error in /Users/lulongwen/Desktop/gom-main/node_modules/antd/es/select/style/index.less (line 374, column 6)

image.png

Operation on an invalid type

alert error

  1. ERR! (undefined) ./node_modules/antd/es/alert/style/index.less
  2. ERR!     position: absolute;
  3. ERR!     top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
  4. ERR! Operation on an invalid type
  5. ERR!       Error in /Users/lulongwen/Desktop/gom-main/node_modules/antd/es/alert/style/index.less (line 29, column 4)

image.png

lessOptions

005.png

less-loader

lessLoaderOptions

  1. lessLoaderOptions: {
  2.   javascriptEnabled: true,
  3.   strictMath: false,
  4.   noIeCompat: true,
  5. },

lessOptions?, additionalData?, sourceMap?, webpackImporter?, implementation?

  1. lessLoaderOptions: {
  2.   // javascriptEnabled: true,
  3.   lessOptions: {
  4.     javascriptEnabled: true,
  5.       strictMath: false,
  6.   },
  7.   implementation: require("less"),
  8.   webpackImporter: false,
  9. },

inLine.jpg

错误的 less

node_modules/antd/es/alert/style/index.less

  1. &-icon {
  2.     position: absolute;
  3.   top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
  4. }
  6. // 正确的语法
  7. top: calc(8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2);

node_modules/antd/es/alert/style/index.less

  1. .iconfont-size-under-12px(@size, @rotate: 0deg) {
  2.     display: inline-block;
  3.   @font-scale: unit(@size/12px);
  4. }