Less 4升级非语法废弃，而是严格解析暴露隐性错误：math默认strict致10px/2报错、@import禁路径推测需显式后缀、嵌套变量作用域隔离、env()函数被静默删除须插值绕过。
Less 2 升级到 Less 4 不是“语法废弃”，而是旧写法在更严格的解析规则下暴露了隐性错误。直接编译报错，大概率不是你写错了，而是以前被容忍的模糊行为（比如无括号除法、隐式单位、变量跨嵌套访问）现在被拦截了。迁移关键不在重写，而在逐项识别并修复这些“历史宽容”。
为什么10px / 2突然报Operation on an invalid type
Less 4 默认启用 math: 2（strict 模式），不再允许无括号的除法运算。它不会报“语法错误”，而是把 10px / 2 当作非法操作——因为除法优先级未明确，解析器无法判断你是想做数学计算，还是写漏了括号。
- 临时验证：运行
npx lessc --math=1 styles.less，若编译通过，说明就是 math 模式问题 - 正确解法：统一加括号，如
(10px) / 2或用点号空格写法10px ./ 2（注意空格） - 别用
math: 1长期配置：它只是兼容旧写法，不解决语义歧义，且未来可能被移除
@import "reset"找不到文件，但reset.less明明存在
Less 4 关闭了路径推测机制。@import "reset" 不再尝试匹配 reset.less 或 reset.css，而是字面查找名为 reset 的文件（无后缀 → 找不到）。
- 必须显式写后缀：
@import "./reset.less";或@import "~normalize.css/normalize.css"; - 用
~别名时，先确认node_modules/xxx下真实存在.less文件；Ant Design v5 等库已移除源码.less，@import "~antd/lib/style/themes/default.less"必然失败 - 中文路径会直接触发
Unrecognised input—— 改用英文路径，或通过less-loader的paths配置根目录映射
嵌套里访问父级@size突然报Variable @size is undefined
Less 4 强化了块级作用域规则。嵌套选择器（如 &-large）内部不再自动继承上层 @ 变量，这是有意为之，不是 bug。
- 错误写法：
.btn { @size: 12px; &-large { font-size: @size; } } - 可行解法一：把变量提到顶层作用域，或用
@@size显式引用父级（仅限一层） - 可行解法二：改用属性插值
font-size: @@size;（注意双@） - 长期建议：避免在嵌套中定义变量，改用函数式封装，如
.btn-size(@s) { font-size: @s; }
env(safe-area-inset-top)编译后没了，页面顶部留白异常
Less 4 完全不识别 CSS 原生函数 env()，既不报错也不透传，而是静默删除整个函数调用，导致生成非法 CSS（如 padding: ; 或 calc(+ 8px)）。
- 必须用插值绕过解析：
padding-top: @{'env(safe-area-inset-top, 0px)'}; - 多个混用时，每个都要单独插值：
padding: calc(@{'var(--base)'} + @{'env(safe-area-inset-top)'}); - 千万别用
~"env()"：Less 4 已废弃该语法，部分版本会警告甚至报错 - 排查技巧：别信编辑器高亮；直接打开编译后的 CSS 文件搜索
env(，若不存在，八成是这里被吞了
真正难处理的不是单个语法点，而是那些藏在 @import "mixins" 宽泛路径下的隐式重复导入——它们让同一个 .rounded() 展开五次，而你只改了一个地方。迁移时得先跑一遍编译输出，搜高频样式块，反向定位哪些混合被多份展开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
