autoprefixer在less项目中不生效的主因是构建链路断裂：postcss-loader顺序错误（须在less-loader后、css-loader前）、postcss.config.js缺失或为空、less中手动写了前缀导致跳过处理、browserslist未覆盖目标浏览器。
Less 本身不加前缀，写了 display: flex 就只输出这一行——缺前缀不是 Less 没编译好，而是你没把它放进正确的构建链路里。
为什么 autoprefixer 在 Less 项目里不生效？
常见现象是 CSS 文件里完全没出现 -webkit-flex、-ms-flexbox 这类规则，哪怕你装了 autoprefixer 并配了 .browserslistrc。根本原因通常是构建流程断了：
-
postcss-loader没放在less-loader之后、css-loader之前——顺序错等于没配 -
postcss.config.js不存在，或导出为空对象（比如只写了module.exports = {}） - Less 源码里手动写了
display: -ms-flexbox，autoprefixer 会直接跳过整条声明 - Webpack 配置中用了
css-loader的esModule: false等非默认选项，干扰了 PostCSS AST 解析
手写 .flex() mixin 是不是更可控？
它确实能立刻看到输出结果，但代价是维护成本和兼容性风险：
- IE11 的
display: -ms-flexbox和现代display: flex渲染行为不一致，混用可能触发怪异模式 - Chrome 已废弃
-webkit-flex，但 mixin 还在吐，白占体积 - 写了
flex-wrap: wrap却漏了-ms-flex-wrap？mixin 不会自动补全关联属性 - 目标浏览器从 “last 2 versions” 改成 “IE 11 only”，你得手动删掉所有
-webkit-行
真正需要 mixin 的场景只剩一种：IE11 根本不支持的语法，比如 gap，必须降级为 margin —— 这时写 .grid-gap(@size) 才有意义。
哪些 IE11 不支持的语法，autoprefixer 帮不上忙？
autoprefixer 只补前缀，不改语法结构。以下这些，必须手动处理：
-
var(--color)：全系 IE 无视，连后备值var(--color, #000)都无效 → 改用 Less 变量：@primary-color: #007bff -
display: grid：IE10–11 只认display: -ms-grid，且必须配-ms-grid-columns和-ms-grid-rows→ 不能靠 autoprefixer 生成 -
gap：IE 中无对应前缀，-ms-gap是非法属性 → 改用margin或封装.grid-gap(@size) -
calc()：IE10+ 支持，但 Less 默认会尝试计算 → 必须转义：width: ~"calc(100% - 20px)"
最容易被忽略的是：autoprefixer 是否真的运行在最终 CSS 字符串上。如果用了 css-loader 的 modules 模式又没配好 exportLocalsConvention，PostCSS 可能压根拿不到原始规则——这种问题不会报错，只会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
