Less 4.x 已移除 math 配置项,强制启用 strict 模式(math: 2),所有数学运算必须显式加括号,如 @size: (10px / 2);未加括号的 10px / 2 会报语法错误,需全局修正变量赋值及第三方库用法。

Less 4.x 的 math 参数已失效,不能配置
Less 4.x 彻底移除了 math: 0 和 math: 1 这类旧配置项,任何在 less-loader、lessc 或 Vite 配置中显式写 math: 0 或 math: 1 的行为都会被静默忽略,并自动 fallback 到 math: 2(即 strict 模式)。这不是配置漏了,是能力被删了。
10px / 2 报错的本质不是配置问题,而是语法要求变了
Less 4 默认按 math: 2 解析,所有除法、乘法等二元运算必须显式加括号,否则直接报 SyntaxError: expected 1 selector or at-rule, was "10px / 2"。
-
@size: (10px / 2);✅ 合法 -
@size: 10px / 2;❌ 编译失败 -
@size: 10px ./ 2;✅ 空格 +./是替代写法,但不推荐——可读性差,且仅对除法有效
Webpack / Vite 用户该改什么?
别在 less-loader 或 css.preprocessorOptions.less 里配 math,它不起作用。真正要做的只有两件事:
- 全局搜索项目中所有变量赋值语句,定位含
/、*、+、-的行(如@gap: 68 / 37.5rem;),逐个补括号 - 检查第三方 UI 库(如旧版 Ant Design)是否还在用无括号运算;若未适配 Less 4,需锁定
less@3或升级到兼容版本 - Vue CLI 用户注意:
vue.config.js中若残留javascriptEnabled: true或math: 0,会触发 less-loader 内部校验失败,构建直接中断
为什么不能关 strictMath 来绕过?
strictMath 在 Less 4 中已合并进 math 体系,单独设 strictMath: false 不再生效。即使你通过 less-loader 强行传入,也会被忽略。唯一可靠路径是修正源码:把 percentage(1/2) 改成 percentage((1/2)),把 lighten(@c, 10) 改成 lighten(@c, 10%)——单位和括号缺一不可。
立即学习“前端免费学习笔记(深入)”;
最容易被忽略的是嵌套中的数学表达式,比如 .btn { @size: 12px; &-large { font-size: @size * 1.25; } },这里 @size * 1.25 必须写成 (@size * 1.25),否则报错位置可能指向父级块开头,误导排查方向。


















