less 编译后 css 缺少私有前缀，根本原因在于构建链路配置错误：postcss-loader 顺序错、未覆盖 .less 文件、手写前缀干扰、browserslist 配置不匹配或特性本身不可加前缀。
Less 编译后的 CSS 缺少浏览器私有前缀，不是 Less 出了问题，而是它本就不该加——less-loader 只做语法转换，autoprefixer 才负责加前缀，且必须在编译完成之后、CSS 被打包前介入。流程断了、配错了、或写了手动前缀，都会导致最终 CSS 里空空如也。
postcss-loader 是否真在处理你的 .less 文件
Webpack 中 postcss-loader 必须位于 less-loader 之后、css-loader 之前；否则它根本收不到标准 CSS，自然不加前缀。
- 错误顺序：
['css-loader', 'postcss-loader', 'less-loader']→postcss-loader收到的是未编译的 Less 语法，直接报错或静默跳过 - 正确顺序（Webpack rule.use）：
['style-loader', 'css-loader', 'postcss-loader', 'less-loader']（注意：从右往左执行） - 检查是否漏配：确认
test: /\.less$/的 rule 里，use数组确实包含postcss-loader，而不是只配在.css规则下 - 快速验证：在
postcss.config.js里写一行require('xxx-missing-plugin')，启动构建——不报错说明该文件压根没被加载
你是不是手写了 -webkit- 或 -ms- 前缀
autoprefixer 看到任何手动前缀，就会放弃整条声明，连本该加的其他前缀（比如 -ms- 对应 IE11 的 flex-wrap）也一并跳过。
- 删掉所有类似
display: -ms-flexbox;、transform: -webkit-transform;的写法 - 清空所有手写
.flex()、.transform()这类 Mixin，它们不仅冗余，还会干扰 Autoprefixer 的属性识别 - 特别注意
@supports块外的 fallback 声明才可能被补前缀，块内标准语法由浏览器自行决定，不加前缀
browserslist 配置是否覆盖真实目标浏览器
autoprefixer 加什么前缀，完全取决于 browserslist。配置不匹配，前缀就加得南辕北辙。
- 运行
npx browserslist查看当前实际生效的浏览器列表，确认是否包含你需要支持的版本（例如Safari 10、IE 11） - 避免模糊写法如
last 2 versions—— Safari 15+ 已原生支持gap，它就不会加-webkit-gap（其实也没这个前缀） - 推荐显式声明：
"iOS >= 12", "Safari >= 13.1", "IE >= 11"，统一写在.browserslistrc或package.json的browserslist字段中 - 别在
postcss.config.js里用已弃用的browsers参数，改用overrideBrowserslist或直接删掉
哪些 CSS 特性 autoprefixer 根本不处理
autoprefixer 只补前缀，不降级语法。很多“没前缀”的现象，其实是特性本身就不支持加前缀，或者 IE/旧版 Safari 压根不认。
-
gap、place-items、aspect-ratio：caniuse 显示无主前缀，Autoprefixer 不会生成任何东西 -
var(--color)：全系 IE 不支持，连后备值都无效，必须用 Less 变量替代 -
display: grid：IE10–11 只支持display: -ms-grid+-ms-grid-columns，这不是加前缀能解决的，得手写两套或用@supports分流 -
calc()：IE10+ 支持，但 Less 默认会尝试计算，必须转义：width: ~"calc(100% - 20px)";
最容易被忽略的点是：你以为在修 Less 写法，其实问题全在构建链路。哪怕只漏掉一个 loader 顺序、或 .browserslistrc 里少写一行 IE >= 11，最终产出的 CSS 就可能在关键浏览器里彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
