<p>Less 4.x不是CSS超集，因默认启用strictMath和strictUnits，导致calc()、伪类选择器等旧写法直接报错，必须重写为calc(~"100% - 20px")、:not()改用postcss-less渐进过渡，并重构@import作用域与命名空间。</p>
Less 4 不是“CSS 的超集”了，它默认启用严格模式，calc()、伪类选择器、未加引号的 URL 等旧写法会直接编译失败——这不是配置能绕过的语法断层，必须按规则重写。
为什么 lessc 升级到 v4 后大量样式编译报错
Less 4 默认开启 strictMath: true 和 strictUnits: true，语义更接近 CSS 运行时，不再容忍模糊写法：
-
width: calc(100% - 20px)→ 必须写成width: calc(~"100% - 20px")，否则 Less 尝试数学运算并报错 -
.btn:not(.disabled)→ 解析器会卡在:和括号，报ParseError: missing closing ')' -
background: url(images/a.png)→ 必须加引号：background: url("images/a.png") -
@import "reset.css"→ 若未声明(inline)，Less 4 会尝试解析 CSS 文件内容，遇到::before直接崩
如何用 postcss-less 替代 lessc 渐进过渡
postcss-less 是目前唯一能安全消化原生 CSS 语法边界的工具，它把 Less 当作“增强层”而非“重解析器”，适合存量项目升级：
- 保留所有原始 CSS 写法（包括
:not()、calc()、url()），只处理变量、嵌套、Mixin - 安装后改 Webpack 配置：
loader: 'postcss-loader'+postcss.config.js中启用postcss-less - 第三方 CSS（如
antd.css）仍用@import (inline) "antd.css"，不参与任何转换 - 构建产物仍是标准 CSS，无运行时依赖，兼容 IE11 及所有 CDN 场景
@import 链和命名空间必须重构才能避免样式爆炸
Less 4 对 @import 的作用域控制更严格，旧项目里“每个组件都 @import variables.less”会导致体积暴涨、热更新卡死：
立即学习“前端免费学习笔记（深入）”；
- 所有基础文件（
variables.less、mixins.less）统一用@import (reference)，防止重复输出 - 入口文件
index.less中只做一次@import (reference) "base/variables"，其余模块靠作用域继承 - 命名空间改用变量控制：
@ns: ~".myapp"; @{ns}-button { }，禁用嵌套式命名如.btn { &:hover { } }，避免生成冗余高权重要素 - 检查每次编译后 CSS 体积，若比原版涨超 25%，大概率有
@import漏了(reference)或存在循环引用
最难的不是改语法，是确认哪些地方“看起来没报错但其实失效了”——比如 fade(@color, 0.8) 在 Less 4 里默认返回 rgba()，而旧项目可能依赖它输出 hsla()；这类隐性行为变更，必须靠视觉回归测试覆盖，不能只看编译日志。
