Less 4.x 仅做语法转换，不生成旧浏览器兼容CSS；必须通过PostCSS（Autoprefixer）在less-loader后补前缀，并手动降级IE不支持的var()、gap、grid等特性。
Less 4.x 本身不生成兼容旧浏览器的 CSS，它只做语法转换；所谓“兼容输出”，必须靠构建链路中的 PostCSS（尤其是 Autoprefixer）在编译后补前缀，再配合手动降级处理 IE 等明确不支持的特性（如 var()、gap、grid）。
Autoprefixer 必须在 less-loader 之后运行
这是最容易被忽略的前提。Autoprefixer 只能处理标准 CSS 字符串，不能解析 Less 源码。如果顺序错，它就收不到有效输入。
-
postcss-loader必须紧接在less-loader后、css-loader前；Webpack 配置中use数组顺序应为：['style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: ['autoprefixer'] } } }, 'less-loader'] - 常见错误：把
postcss-loader放在less-loader左侧（即先执行），或只配在/\.css$/规则里却没覆盖/\.less$/ - 验证是否生效：运行
npx browserslist，确认输出包含目标旧浏览器（如IE 11、Safari 12）
手写前缀必须全部删除
Less 编译时不知道目标浏览器，.flex-center() { display: -webkit-flex; } 这类 Mixin 会无差别输出，导致现代浏览器加载冗余规则，甚至触发渲染异常。
- Chrome DevTools 中看到
display: -webkit-flex、display: -ms-flexbox、display: flex并存且后两条被划掉 → 说明 Autoprefixer 已跳过整条属性（因检测到已有前缀） -
gap、place-items等属性本就不该加前缀；强行添加会让 Safari 直接忽略整条声明 - 删掉所有
-webkit-、-ms-、-moz-手动前缀，交由 Autoprefixer 按browserslist精准生成
IE 不支持的特性必须手动降级
Autoprefixer 只补前缀，不改语法。IE8–IE11 对 var(--x)、gap、display: grid 完全无识别能力，必须显式替换。
立即学习“前端免费学习笔记（深入）”；
-
var(--x)→ 改用 Less 变量：@primary-color: #007bff;，然后写color: @primary-color; -
gap→ 改用margin或封装 Mixin：.grid-gap(@size) { > * + * { margin-left: @size; } } -
display: grid→ IE10–11 只认display: -ms-grid，需配-ms-grid-columns等专用属性，不能靠插件生成 - 所有降级逻辑必须显式写出，不能依赖任何“自动转换”假设
Less 4.x 自身语法变更要严格规避
升级后很多旧写法不再计算，也不报错，而是静默输出非法 CSS，浏览器直接丢弃整条声明。
- 除法必须加括号：
width: (100px / 4);或用./：width: 100px ./ 4;（注意空格） -
@import必须带.less后缀：@import "./mixins.less";，否则报ReferenceError - 嵌套中无法访问父级
@变量 → 把变量提至文件顶层，或在嵌套块内重新声明 - 颜色/数学函数参数必须带单位：
lighten(@color, 10%)，而非lighten(@color, 10)
真正难排查的是那些不报错、不中断构建、却让样式静默消失的地方：一个漏掉的括号、一行错位的注释、一个没加单位的函数调用——它们都不会打断 CI，但上线后用户就看不到正确样式。
