less 4 升级需显式关闭 strictmath/strictunits、第三方 css 必用 @import (inline)、@import 去重失效需改用 (reference)、变量嵌套易致静默覆盖、单位推导变化引发样式漂移。
直接升级 Less 版本或把 .css 改成 .less 后编译通过 ≠ 样式正确——老项目重构失败，八成栽在隐性行为变化上，不是语法报错，而是单位推导、除法解析、@import 作用域这些“静默偏移”。
Less 4 升级后 calc() 和除法突然报错？
Less 4 默认开启 strictMath: true 和 strictUnits: true，老写法会直接崩：
-
width: 100px / 2;→ 报Operation on an invalid type，必须写成width: (100px / 2);或width: ~"100px / 2"; -
width: calc(100% - 2px);→ 报ParseError: missing closing ')'，得改成width: calc(~"100% - 2px"); - Webpack 用户必须在
less-loader配置中显式关掉：{ lessOptions: { strictMath: false, strictUnits: false } } - 命令行用户不能只改版本号，得加参数：
lessc --strict-math=off --strict-units=off input.less output.css -
.lessrc和package.json#less已被 Less 4 废弃，配了也无效
第三方 CSS（如 antd.css）导入就炸？
Less 4 对 @import 的校验更严，普通导入会尝试解析非 Less 文件，导致构建中断：
- 所有第三方
.css必须用@import (inline) "antd.css";，否则会被当 Less 源码解析并报错 - 避免跨文件重复
@import "mixins/breakpoints"——Less 4 不再自动去重，体积暴涨且热更新失效 - 基础变量/Mixin 全部收口到单个
base.less，其他文件只用@import (reference) "base.less"，防止样式污染和重复输出 - 检查编译后 CSS 大小，若暴涨超 30%，大概率是漏了
(reference)或误用了普通@import
变量和嵌套看似省事，实则埋雷最深？
Less 变量是编译期静态替换，嵌套是字符串拼接——这两点在老项目里最容易引发“改了没反应”或“莫名覆盖”：
- 同名变量在不同
@import文件中定义，后加载的会静默覆盖前一个，调试时样式“突然变矮”极难定位 -
@z-index-modal: 1000; @z-index-overlay: @z-index-modal + 1;看似合理，但一旦@z-index-modal被改成字符串（比如加了单位），整个运算崩掉且无提示 - 嵌套超过三层（如
.page .section .block .item）会导致选择器过长、特异性飙升，后续只能靠!important覆盖 -
&__element必须直属于块名，禁止写成.card > .content > .card__title——这已违背 BEM 原子性，组件复用即失效 - 所有 mixin 必须带括号定义和调用：
.btn-base() { ... }和.btn-primary { .btn-base(); }，漏括号会生成空规则污染输出
编译通过了，但按钮尺寸/断点却悄悄偏了？
这是最危险的坑：不打断构建，但让 UI 在生产环境缓慢漂移。Less 4 的单位推导逻辑变了：
-
1em * 2返回2em（旧版是2），10px + 1rem直接报错而非静默转成 px - 表面看 DOM 渲染正常，但 computed
width/margin/padding已与 Less 3 不一致 - 务必人工抽检至少 5 个典型页面，重点查
@spacing-sm这类抽象变量背后是否还绑着隐式单位转换 - 变量抽象越深，越要确认每个值在最终 CSS 中是否仍带单位——尤其涉及
calc()、媒体查询断点、缩放比例等敏感位置
重构不是换后缀，是重新校准语义边界。老项目里最该先动的，从来不是代码，而是 @import 顺序、变量命名规范、以及所有未加 (reference) 或 (inline) 的导入语句。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
