less 4.x 通过严格规则替代模糊旧行为:math 配置移除 math: 0 并默认 fallback 到 math: 2;@import 必须显式带后缀;颜色/数学函数参数须带单位;变量作用域隔离增强,嵌套中无法隐式访问父级 @ 变量。

Less 4.x 没有“取消支持”,而是把模糊、易歧义的旧行为显式收口为可配置的严格规则——核心不是删功能,是堵漏洞、防误读。
math 配置项被重定义,math: 0 彻底失效
Less 3.x 的 math: 0(即 parens-division)在 4.x 中已被完全移除。它不会报错,但会被静默忽略,编译器自动 fallback 到 math: 2(strict 模式)。结果就是:你没改代码,却突然开始报 Operation on an invalid type。
-
math: 1→ 兼容旧写法,允许10px / 2这类无括号除法,但不解决语义歧义 -
math: 2→ 强制要求所有除法加括号,如(10px) / 2或10px ./ 2(注意空格) - 配置必须落在编译器启动时生效的位置:Webpack 中要写在
less-loader的options里,Vite 中必须嵌套在css.preprocessorOptions.less下
@import 不再自动补后缀,路径必须字面精确
v4 默认关闭路径推测机制。@import "mixins" 不会再去尝试找 mixins.less 或 mixins.css,而是直接按字符串字面值查找文件。常见现象是变量未定义,实际只是导入失败。
- 必须显式写后缀:
@import "./variables.less"; - 用
~别名时,先确认node_modules/xxx下真实存在 .less 文件(例如 Ant Design v5 已移除所有 .less,@import "~antd/lib/style/themes/default.less"必然失败) - 如果项目依赖第三方库的 Less 源码,升级前先
ls node_modules/xxx/dist或查其文档是否还提供 .less
函数参数校验收紧,单位不再隐式推导
像 lighten(@color, 10)、fade(@primary, 20) 这类写法在 v4 中直接报错——10 和 20 不是合法数值类型,必须带单位,如 10%。
- 颜色函数:
lighten()、fade()、saturate()等第二参数必须是百分比(%)或带单位数值 - 数学函数:
percentage(1/2)会原样输出字符串"1/2",必须写成percentage((1/2))或percentage(0.5) -
round(10.4px)合法,结果是10px;但round(10.4)输出纯数字10,无单位
变量作用域隔离增强,嵌套中无法隐式访问父级 @ 变量
以下写法在 v3 中能运行,v4 中报 Variable @size is undefined:
.btn {
@size: 12px;
&-large {
font-size: @size; // ❌ v4 报错
}
}
这不是 bug,是作用域规则更贴近块级语义:
- 嵌套选择器内部不继承上层
@变量,除非显式提升(如用@@size或移到顶层作用域) - 推荐做法:把公共变量统一放在
variables.less中,通过@import显式引入 - 临时绕过可用
@@语法(如@@size),但仅限当前块内有效,不可跨层级穿透
真正容易被忽略的是:这些变更不是“语法错误”,而是编译器对开发者意图的重新约束。报错位置往往远离问题根源(比如 @import 写错导致下游所有变量未定义),调试时得逆着依赖链往回查。











