Less本身不加前缀，autoprefixer只处理编译后的标准CSS；必须确保less-loader→postcss-loader→css-loader顺序正确、browserslist生效且无手动前缀干扰。
PostCSS 不处理 Less 源码，只处理编译后的标准 CSS
Less 本身完全不参与前缀生成，autoprefixer 也从不读取 .less 文件。你写的 .box { display: flex; gap: 1rem; }，必须先被 less-loader 编译成纯 CSS 字符串，再交给 postcss-loader + autoprefixer 处理——中间任何一环断开，前缀就消失。
常见错误现象：display: flex 编译后没出现 -webkit-flex 或 -ms-flexbox；或者控制台报错 Unknown word，那基本是 postcss-loader 收到了未编译的 Less 语法（比如嵌套、@mixin）。
- Autoprefixer 只解析标准 CSS AST，遇到
@media (max-width: @screen-sm)这类 Less 特有语法会直接跳过整条规则 -
less-plugin-autoprefix已停更多年，硬编码浏览器数据，不支持gap、place-items等现代属性，别用 - 所有前缀逻辑必须放在 CSS 层，不是 Less 层；
.less文件里只写标准语法，不写任何-webkit-或-ms-
Webpack 中 loader 顺序必须是 less → postcss → css
loader 执行顺序是从右往左，但逻辑流程必须是：Less 编译 → PostCSS 处理 → CSS 解析。顺序错，autoprefixer 就收不到合法输入。
✅ 正确写法（use 数组）：
立即学习“前端免费学习笔记（深入）”；
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [require('autoprefixer')]
}
}
},
'less-loader'
]
❌ 错误写法：['style-loader', 'css-loader', 'less-loader', 'postcss-loader'] —— postcss-loader 收到的是原始 Less 字符串，不是 CSS。
- 检查
module.rules是否只给/\.css$/配了postcss-loader，却漏掉了/\.less$/规则 -
postcss-loader的配置必须用postcssOptions包裹，旧版plugins字段在新版中可能被忽略 - 拼写错误如
post-css-loader或postcss-load不报错但不生效，容易被忽略
.browserslistrc 配置失效是前缀不出现的最常见原因
写了 display: flex 却没出前缀，90% 是因为 .browserslistrc 没生效，或目标环境和实际用户脱节。
常见问题：
- 写
last 2 versions就以为覆盖全了——它包含 IE11，但你的用户全是 Chrome 120+ - 混用逻辑：
last 2 versions, not dead会导致 IE11 被包含又被排除，结果不可预测 -
browserslist配置没放对位置：Webpack 需靠postcss-loader显式加载，Vite 默认读根目录postcss.config.js或.browserslistrc - CLI 手动调试时漏掉
-b参数：lessc src/a.less | npx autoprefixer -b ">1%, last 2 versions" > dist/a.css，不加-b就按默认规则（仅 IE10+）跑
手动加了前缀，Autoprefixer 就自动放弃整条规则
Autoprefixer 的设计原则是：“看到任意厂商前缀，就认为你已接管兼容性”。一旦你在 Less 里写了 display: -webkit-flex 或 transform: -moz-transform，它就不会再补任何其他前缀——包括本该加的 -ms- 或 -webkit-。
- 删掉所有自定义
.flex()、.transform()Mixin，它们只会污染输出 -
@supports块内不要写带前缀的 fallback；块外的标准声明才由 Autoprefixer 处理 - IE10/11 的
-ms-flexbox必须手动书写且顺序固定（display: -ms-flexbox;必须在display: flex;前），但这是例外，不是常规做法
真正需要关注的，从来不是“怎么让 Less 加前缀”，而是“如何确保 Autoprefixer 在正确时机、用正确目标、处理正确输入”。漏掉任一环节，都只会得到一份看起来干净、实则兼容性崩塌的 CSS。
