Autoprefixer 不在 Sass 编译阶段生效，仅处理编译后的标准 CSS；其正确运行依赖 PostCSS 在 Sass 后执行、browserslist 精确配置、插件顺序合理（如置于 cssnano 前），且不替代降级方案。
Autoprefixer 不会在 Sass 编译阶段生效，它只处理 Sass 输出后的标准 CSS 字符串；配置失败的主因通常是 PostCSS 没跑进构建流程，或 browserslist 没覆盖目标浏览器。
PostCSS 必须在 Sass 编译之后运行
Autoprefixer 是 PostCSS 插件，不是 Sass 的一部分。你在 .scss 里写 display: flex，Sass 编译器只会输出干净的 display: flex，不会加任何前缀——这一步必须交给 Autoprefixer 做。
- 正确流程只能是：
sass→ 输出纯 CSS →postcss-loader（含 autoprefixer）→ 最终文件 - Webpack 中常见错误：把
postcss-loader放在css-loader之前，或没设css-loader的importLoaders: 1，导致@import进来的 Sass 输出 CSS 绕过了 PostCSS - Vite 默认启用 Autoprefixer，但如果你在
vite.config.js里写了css.postcss对象，就会覆盖默认配置，插件实际未加载 - 验证是否生效：在
postcss.config.js里写require('xxx-missing')，启动构建——不报错说明该文件根本没被读取
browserslist 配置决定前缀加不加、加哪些
Autoprefixer 的行为 100% 由 browserslist 控制，和你写的 CSS 内容无关。模糊配置如 "last 2 versions" 在 2026 年已不含 IE 或旧 Safari，结果就是该加的前缀一个不加。
- 推荐把
browserslist直接写在package.json里，避免多处维护 - 线上项目建议显式声明，例如：
"iOS >= 13"、"Safari >= 14.1"、"Chrome >= 90"、"IE >= 11" - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看place-items或gap这类属性会不会被处理 - Flex 布局需兼容 IE11？得传选项：
require('autoprefixer')({ flexbox: 'no-2009' })；Grid 前缀默认关闭，要支持 IE10/11 才加grid: true
别信 Sass @mixin 自动加前缀的方案
所谓 @mixin flex 或 @include transform 是过时做法。它们不读 browserslist，无法动态判断要不要加 -webkit-，更没法处理 gap + flex-wrap 这类交叉场景。
立即学习“前端免费学习笔记（深入）”；
- 这类 mixin 在编译期硬展开，比如固定输出
-webkit-box+-ms-flexbox+flex，但 Chrome 120 已废弃-webkit-box，结果反而引入无效甚至报错代码 - Autoprefixer 查的是实时 Can I Use 数据，知道 iOS 14.5 只需
-webkit-，而 Safari 16.4 完全不需要 - 唯一值得手写
@mixin的场景是属性本身「带前缀才生效」，比如backdrop-filter，这时它是明确声明意图，不是替代 Autoprefixer
构建后前缀消失？大概率是 cssnano 干的
开发环境有前缀、打包后没了，八成是 cssnano 在压缩阶段启用了内置的 autoprefixer，并用自己的 browserslist 配置覆盖了你的，甚至直接删掉“冗余”前缀。
- 检查
cssnano配置，禁用其内置 autoprefixer：{ preset: ['default', { autoprefixer: false }] } - 确保
postcss.config.js中autoprefixer插件排在cssnano之前（PostCSS 插件顺序影响执行时机） - Webpack 构建后清空
.cache目录，Vite 清理node_modules/.vite，否则旧缓存可能掩盖真实问题
最容易被忽略的一点：Autoprefixer 不转译语法，只补前缀。写 aspect-ratio: 1/1 没前缀是正常的，因为它压根不需要；但写 display: grid 却在 IE11 崩溃，不是因为缺前缀，而是 IE11 的 -ms-grid 和现代 grid 根本不兼容——这时候该做的是降级方案，不是堆前缀。
