autoprefixer必须在sass编译完成后的css字符串上运行，因其是postcss插件而非sass语法；它基于browserslist实时分析并按需添加/删除前缀，而@mixin仅机械展开、无法动态适配浏览器演进。
Autoprefixer 必须在 Sass 编译完成之后、CSS 文件最终输出之前运行，它不识别 .scss 源码，只处理标准 CSS 字符串。想靠 @mixin 或 sass --watch 自己加前缀，大概率漏掉或冗余。
为什么不能把 Autoprefixer 当成 Sass 的 @mixin 用
Autoprefixer 是 PostCSS 插件，不是预处理器语法。你在 .scss 里写 @include flex-center，Sass 只是机械展开成一堆带 -webkit- 的声明；而 Autoprefixer 是在生成的 CSS 上做语义分析——它知道 display: flex 在 iOS 14.5 需要 -webkit-，但在 Chrome 115 就不需要，还会删掉你手动写的过时前缀。
-
@mixin是“写死”，Autoprefixer 是“按需”——前者不管浏览器是否还支持，后者查browserslist数据库实时判断 - 如果你只用
@mixin却没接 Autoprefixer，clip-path、aspect-ratio这类新属性根本不会被处理 - Sass 编译时无法解析
#{\$prop}的真实值，所以动态拼属性名的 mixin（比如@mixin vendor($prop, $val)）极易出错甚至编译失败
如何确认 Autoprefixer 真正生效了
别看 .scss 源码里有没有 -webkit-，直接检查最终输出的 .css 文件内容。常见错误是配置了但没进构建链，或者 browserslist 写得太“新”。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 打开编译后的
dist/main.css，搜索flex，应看到类似：display: -ms-flexbox; display: flex;（IE10 + 现代浏览器） - 如果只看到
display: flex;，检查browserslist是否包含"IE >= 10"或"iOS >= 14.5"这类明确旧版本 - 运行
npx browserslist命令，确认当前配置实际匹配哪些浏览器版本 - Webpack/Vite 用户注意：PostCSS 插件必须在
css-loader之后、mini-css-extract-plugin之前执行
常见构建链中 Autoprefixer 的接入位置
核心原则：Sass → CSS → PostCSS（含 Autoprefixer）→ 最终 CSS。顺序错了就等于没加。
- 用
sassCLI：必须配合postcss-cli，例如：sass src/main.scss | postcss --use autoprefixer > dist/main.css - Webpack：在
postcss-loader的plugins数组里显式写require('autoprefixer')，别只依赖css-loader默认行为 - Vite：默认已集成 Autoprefixer，但需确保项目根目录有
browserslist或package.json中的browserslist字段 - Gulp：
.pipe(postcss([autoprefixer()]))必须放在sass()之后、dest()之前
最容易被忽略的是 browserslist 配置和构建链顺序。很多人以为装了插件就自动工作，结果上线后 iOS Safari 14.5 里 transform: scale() 没有 -webkit- 前缀，直接失效。验证永远以输出 CSS 为准，而不是开发时编辑器里高亮的颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
