Less 4.x 升级需逐项对齐math、@import、单位校验、作用域四规则：math必须显式配math: 1或改括号；@import须带后缀；颜色/数学函数参数须带单位；嵌套中父级变量需@@引用或提至顶层。
直接改 lessc 版本或只升级 less-loader 会触发大量静默失效和编译错误——Less 4.x 不是语法增强，而是规则收紧，math、@import、单位校验、作用域这四块必须逐项对齐，否则构建可能成功但样式错乱。
math 配置失效导致除法报错
Less 3.x 的 math: 0（允许 10px / 2 这类无括号除法）在 4.x 中被完全移除，且不报错，而是静默 fallback 到 math: 2（strict 模式）。结果就是：旧代码没动，编译却开始报 Operation on an invalid type。
- 必须显式配置
math: 1才能兼容旧写法，且该配置必须落在构建工具启动时生效的位置：webpack中写进less-loader的options，Vite中嵌套在css.preprocessorOptions.less下 -
math: 2要求所有除法加括号，如(10px) / 2或带空格的10px ./ 2；percentage(1/2)必须改为percentage((1/2)) - 检查所有
calc()表达式：Less 4.x 不再自动识别原生 CSS 函数，width: calc(100% - @spacing-md)必须写成width: calc(~"100% - @{spacing-md}")
@import 路径必须显式带后缀
Less 4.x 默认关闭路径推测机制，@import "mixins" 不再尝试匹配 mixins.less 或 mixins.css，而是按字面字符串查找文件。常见现象是变量未定义、Mixin 不可用，实际只是导入失败。
- 所有
@import必须显式写出完整路径与后缀：@import "./variables.less";、@import "~antd/lib/style/themes/default.less"; - 使用
~别名前，先确认node_modules/xxx下真实存在对应.less文件（例如 Ant Design v5 已移除所有.less，该@import必然失败） - 第三方 CSS（如
reset.css）不能直接@import "reset.css"，应改用@import (inline) "reset.css"原样注入，避免解析器误处理伪类或函数
颜色/数学函数参数必须带单位
Less 4.x 对函数参数类型校验更严格，lighten(@color, 10) 或 fade(@primary, 20) 这类写法直接报错——10 和 20 不是合法数值类型，必须是带单位的值。
- 所有颜色函数第二参数必须为百分比：
lighten(@color, 10%)、fade(@primary, 20%)、saturate(@color, 15%) - 数学函数中无单位数字参与运算会丢失上下文：
round(10.4)输出纯数字10，而round(10.4px)输出10px；若需保留单位，输入值必须自带单位 -
calc()内部的 Less 变量必须包裹在~""中，且不能混用单位推导逻辑，例如calc(~"@{width} - 2px")是安全的，calc(@width - 2px)会因单位不匹配报错
嵌套中无法隐式访问父级变量
Less 4.x 强化了块级作用域语义，嵌套选择器内部不再继承上层 @ 变量，这是最易被忽略的“静默断裂点”——编译不报错，但生成的 CSS 缺失样式。
- 以下写法在 3.x 可运行，在 4.x 中报
Variable @size is undefined：.btn { @size: 12px; &-large { font-size: @size; } } - 解决方案只有两种：把变量提到顶层作用域（如
base.less中统一定义），或显式提升作用域，用@@size（注意双@）引用父级变量 - 禁止在 Mixin 内硬编码
@import路径，应使用相对路径 + 构建工具解析；否则迁移时@import "mixins/button"可能指向已删除的旧目录，且错误不会在编译阶段暴露
真正难的不是改语法，而是识别哪些地方改了也白改——比如 @import 链过深导致构建爆栈、变量重复注入引发 CSS 体积暴涨、或 javascriptEnabled: true 开启后动态 @import 在纯 CSS 环境里彻底失效。这些都得靠构建后检查生成 CSS 的体积变化和选择器结构，而不是依赖编译日志。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
