Less编译不解决兼容性问题，仅作语法转换；Autoprefixer必须在less-loader之后运行以补前缀，但无法降级语法（如var()、grid），IE等旧浏览器需手动降级并用@supports兜底。
Less编译本身不解决兼容性问题
Less只是语法转换器，var(--x)、gap、display: grid这些写进 Less 文件里的东西，编译后原样输出，IE11 或 Chrome 30 直接忽略或报错。所谓“兼容性问题”，99% 是因为输出了浏览器根本不认识的 CSS，而不是 Less 没编译对。
常见现象：IE11 里 place-items: center 被划掉；Safari 14.0 报 Unknown property 'gap'；Chrome 开发者工具里出现三条 display 声明（-webkit-flex、-ms-flexbox、flex），后两条被标记为无效——这说明前缀逻辑已失控。
- 手写前缀（如
.flex() { display: -webkit-flex; }）会让 Autoprefixer 跳过整条属性，导致justify-content等关联属性漏补 -
gap、aspect-ratio、var()这类属性本就不该加前缀，强行加反而让 Safari 忽略整条声明 - Less 编译时完全不知道目标浏览器范围，Mixin 输出无差别，现代浏览器加载冗余规则，甚至触发怪异模式
Autoprefixer 必须在 less-loader 之后运行
Autoprefixer 只处理标准 CSS 字符串，不是 Less 源码。它必须紧接在 less-loader 输出纯 CSS 后立即执行，顺序错了就彻底失效。
Webpack 中正确配置示例（注意 use 数组从右往左执行）：
立即学习“前端免费学习笔记（深入）”；
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
},
'less-loader'
]- ❌ 错误：把
postcss-loader放在less-loader左侧，或配在/\.css$/规则里却没覆盖/\.less$/ - ❌ 错误：
plugins: [require('autoprefixer')({ browsers: ['IE >= 10'] })]——browsers参数自 2023 年起已废弃，会静默失效 - ✅ 推荐：根目录建
.browserslistrc，内容如last 2 versions、IE >= 11、Safari >= 14，再运行npx browserslist验证是否命中目标
IE 不支持的特性必须手动降级，不能靠 Autoprefixer
Autoprefixer 只补前缀，不降级语法。var(--x) 在 IE 全系中连语法解析都失败，display: grid 不会变成 display: -ms-grid，gap 更不会自动拆成 margin 补偿。
关键原则：静态值前置，var() 后置，用 @supports 包裹增强逻辑：
.btn {
background: #007bff; /* 所有浏览器兜底 */
background: var(--primary, #007bff); /* 支持变量的浏览器覆盖 */
}
<p>@supports (background: var(--bg)) {
.card {
background: var(--bg, #f8f9fa);
}
}-
var(--x, #fff)在 IE 里完全无效——它连var()函数都不认识，根本不会读括号里的后备值 -
display: grid要支持 IE10–11，必须手写display: -ms-grid+-ms-grid-columns+-ms-grid-rows，不能只靠前缀 -
clip-path、aspect-ratio这类支持度碎的属性，优先用@supports (clip-path: polygon(0 0))检测，而不是硬塞 Mixin
多列布局、Flex 等场景需显式封装可开关的 Mixin
别用黑盒式 .vendor-prefix()，它掩盖真实兼容性问题，且在现代浏览器里注入冗余样式。真正该封装的是「按需、可开关、带版本判断」的补丁逻辑。
例如多列布局，column-count 在 iOS 12 Safari 里需要 -webkit-column-count，但 column-gap 在 iOS 11.3+ 才原生支持，得同步输出两套：
.columns(@count: 3, @gap: 1rem) {
column-count: @count;
-webkit-column-count: @count;
<p>column-gap: @gap;
-webkit-column-gap: @gap;
}- Mixin 必须显式暴露参数开关，比如
.flex-center(@legacy: true)，@legacy: false时只输出标准语法 - 避免在 Mixin 里硬编码 UA 或版本号，改用变量统一控制，如
@ie11-support: true -
&嵌套在@media内部必须依附外层选择器，@media (max-width: 768px) { & { color: red; } }是非法写法
最易被忽略的一点：所有手动降级和 Mixin 封装，都建立在 Autoprefixer 正常工作、browserslist 配置准确的前提下。缺一不可。
