Less 4.x 是重写语义解析规则而非升级版，除法、颜色函数、变量作用域等行为全变，必须同步调整代码写法和构建链路，否则导致样式错乱或编译失败。
Less 4.x 不是“升级版”，而是重写了语义解析规则；直接替换 less 包版本会导致样式输出错乱、编译失败或静默丢弃，必须同步调整代码写法和构建链路。
除法、颜色函数、变量作用域行为全变了
Less 4.x 对表达式求值更严格，旧写法会原样输出或报错，不是兼容问题，是语法解释逻辑不同。
-
width: 100px / 4;→ 现在不计算，直接输出字面量；必须写成width: (100px / 4);或width: 100px ./ 4; -
lighten(@c, 10)→ 报Parsing error: expected percentage；必须补单位：lighten(@c, 10%) -
.card { @pad: 16px; &__header { padding: @pad; } }→@pad报未定义；嵌套中无法隐式访问父级变量，得提成顶层变量，或改写为&__header { @pad: 16px; padding: @pad; } -
@import "mixins"→ 不再自动补.less后缀，也不识别node_modules别名路径；必须写全@import "mixins.less";，且路径相对于入口文件或--include-path
新 CSS 特性支持 ≠ 自动启用，要配对工具链
Less 4.0+ 才定义了 aspect-ratio、container、color-mix() 的 AST 节点，但只装 less@4.2.0 不够，构建插件也得换。
-
less-loader必须 ≥ 8.0.0：旧版仍调less.render()同步方法，而 Less 4.x 只暴露renderAsync()，会报TypeError: less.render is not a function - Vite 用户需用
vite-plugin-less@^2.0.0：低于此版本 fallback 到内置 Less 3.x 内核，@container直接消失，不报错也不输出 - 命令行用户要卸载全局
lessc，重装：npm rm -g less && npm i -g less@4.2.0，否则lessc --version仍显示 3.x
编译后 CSS 行为异常？先看是不是 AST 解析错位
很多“样式不对”其实是 Less 4.x 解析出的 AST 和你预期不一致，尤其在嵌套、Mixin 展开、@import 合并环节。
立即学习“前端免费学习笔记（深入）”；
-
.flex-center没加()→ Less 当作选择器处理，整块规则静默丢弃；所有 mixin 调用必须带括号，包括无参的.flex-center() -
/deep/或::v-deep直接写进 Less → 编译失败；要用转义变量：@deep: ~">>>"; @{deep} .btn { color: red; } - 四层以上嵌套（如
.layout .sidebar .content .item）→ 权重爆表、匹配性能差，Lighthouse 会标红；应压平为 BEM 类名，或用@at-root抽离媒体查询 -
@import (once)或(reference)在 Less 4.x 中作用域行为没变，但变量加载顺序更敏感；环状依赖（A→B→C→A）仍会卡死，不报循环错误，只堆内存溢出
升级后第一处报错常是路径或编码，不是新语法
很多人以为 ParseError: Unrecognised input 是用了新特性，其实 90% 是路径含中文、BOM、零宽空格或注释黏连。
- 路径含中文（如
@import "../组件/button.less"）→ Less 词法分析器直接停；Webpack 配less-loader的paths，Vite 配preprocessorOptions.less.paths，然后全部改用 ASCII 路径 - 复制网页/Word 代码进来 → VS Code 开“显示不可见字符”，揪出
U+200B零宽空格、U+00AD软连字符、UTF-8 BOM；它们会让@primary-color: #333;/*注释*/直接报错 -
@import行末加/* 工具类 */注释 → Less 3.13.x 会把;和/*黏在一起，当成不完整声明；注释必须独占一行，且前后空行 -
.less文件必须 UTF-8 无 BOM，且首行严格为@charset "UTF-8";（前面不能有任何空行或字符）；VS Code 右下角显示 “UTF-8” 不代表安全，要选 “Save with Encoding” → “UTF-8”（不是 “UTF-8 with BOM”）
真正麻烦的是，Less 4.x 的变化不是“加功能”，而是 AST 构建逻辑整体重构——变量作用域、嵌套展开时机、@import 合并顺序都可能和你记忆里的 Less 3.x 不同。别指望靠试错调通，得对着编译后 CSS 反查源码，确认每一处输出是否符合新规则。
