Autoprefixer 不在 Sass 编译阶段生效，仅处理编译后的标准 CSS；失效主因是构建流程中断、browserslist 配置无效或插件未加载。
Autoprefixer 不会在 Sass 编译阶段起作用，它只处理 Sass 输出后的标准 CSS；不生效的根因几乎全是构建流程中断、browserslist 配置失效或插件未真实加载。
为什么 postcss.config.js 配置了但没加前缀？
最常见的情况是：该文件根本没被读取。构建工具（如 Webpack/Vite）只在特定路径下自动加载它，放错位置或被其他配置覆盖就会静默失效。
- 在
postcss.config.js里写require('xxx-missing')，启动构建——如果不报错，说明文件压根没进加载链路 - Vite 中若在
vite.config.ts里写了css.postcss对象，会完全覆盖默认配置，autoprefixer实际未启用 - Webpack 项目中，
postcss-loader必须放在css-loader之后，且css-loader的importLoaders至少为1，否则@import进来的 Sass 输出 CSS 会绕过 PostCSS
为什么 browserslist 写了却还是不加 -webkit-？
Autoprefixer 加不加前缀、加哪些，100% 由 browserslist 输出的浏览器范围决定，和你写的 CSS 内容无关。模糊配置（如 "last 2 versions"）在 2026 年已匹配不到旧 Safari 或 Android WebView，结果就是该加的前缀一个不加。
- 执行
npx browserslist查看当前配置实际命中哪些浏览器版本，比如是否包含ios_saf 16.4或and_uc 14.4 - 推荐把
browserslist直接写在package.json里，避免.browserslistrc和 CI 环境不一致 - 国内项目慎用
> 1%：iOS 15.0 全球占比仍超 1%，但它对aspect-ratio支持不稳定；显式写"iOS >= 16.4"更可控
为什么开发时有前缀，打包后没了？
生产构建常引入独立的 CSS 压缩插件（如旧版 OptimizeCSSAssetsPlugin），它自带一套过时的 Autoprefixer，会覆盖你配的版本，导致开发环境正常、上线后前缀消失。
- 检查构建产物（dist 下的 CSS 文件），直接搜索
-webkit-或-ms-，别信本地预览 - 运行
npx autoprefixer --info看当前配置下flex-wrap、gap等属性是否会被处理 - Flex 布局要兼容 IE11？得传选项：
require('autoprefixer')({ flexbox: 'no-2009' })；Grid 前缀默认关闭，IE10/11 需显式加grid: true
为什么还在 Sass 里写 @mixin flex？
这类混合宏是过时做法：不读 browserslist，无法判断要不要加 -webkit-，更没法处理 gap + flex-wrap 这类交叉场景。它们在编译期硬展开，和 Autoprefixer 的动态决策完全脱节。
- 写
@mixin vendor($prop, $val)是危险操作——若$prop是display，会生成无效的-webkit-display，直接导致样式解析失败 - 仅少数场景值得保留
@mixin：比如backdrop-filter在 Safari 17.4 仍只认-webkit-backdrop-filter，这时需手动前置声明 - 推荐写法：
@mixin backdrop-filter($value) { -webkit-backdrop-filter: $value; backdrop-filter: $value; }，顺序固定，不泛化，不拼字符串
最容易被忽略的点是：Autoprefixer 只补前缀，不降级语法、不模拟缺失特性。比如 vh 在 iOS Safari 地址栏收放时失效、sticky 在部分安卓 WebView 中不工作——这些必须靠 JS 或 @supports 手动兜底，不是加个前缀就能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
