Autoprefixer 不是 Sass 插件，它只在 CSS 编译后阶段通过 PostCSS 工作；Sass 的 @mixin 仅做静态文本替换，无法动态判断浏览器兼容性，因此 @include flex 等不会自动加前缀，真正生效的是构建工具层的 PostCSS autoprefixer 插件。
别在 Sass 里写 @mixin transform 了——Autoprefixer 不是 Sass 插件，它只在 CSS 编译后阶段工作，且必须走 PostCSS 构建链。
为什么 @include flex 永远不会自动加前缀
Sass 本身不识别浏览器兼容性，@mixin 只做文本替换。你写的 @include flex 编译出来就是你硬编码的那几行，比如 display: -webkit-box，但 Chrome 110 根本不需要它，而 aspect-ratio 这种新属性它又完全不管。所谓“Sass 的 Autoprefixer 混合宏”早被社区淘汰，连官方文档都不提了。
常见错误现象：
- 开发时看到前缀，build 后没了 → 构建流程漏掉了 PostCSS 阶段
- 打包 CSS 里有
-webkit-，但线上 Safari 仍不生效 →browserslist配得太松，加了过时前缀反而触发旧引擎 bug - 用 Vite 却在
vite.config.js里配了css.preprocessorOptions.sass，结果绕过了默认的 PostCSS 处理
怎么让 Autoprefixer 真正跑起来（以 Vite 为例）
Vite 默认集成 PostCSS，但前提是：你没手动干扰它的 CSS 处理链。关键不是“装插件”，而是“不破坏默认流程”。
- 确保已安装：
npm install --save-dev autoprefixer postcss - 在
package.json中声明目标浏览器（browserslist字段），例如：["> 1%", "last 2 versions", "not dead", "iOS >= 12", "Chrome >= 87"]
- 删掉
vite.config.js中任何对css.postcss.plugins的重写或清空操作（Vite 会自动读取postcss.config.js或package.json中的配置） - 确认你的样式文件是通过
import './index.scss'引入的，而不是用<link rel="stylesheet">直接加载未编译的 .scss
Webpack 用户最容易踩的 loader 顺序坑
postcss-loader 必须紧挨着 css-loader 之后、style-loader 之前。顺序错一位，Autoprefixer 就收不到原始 CSS 字符串。
正确顺序示例：
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: { plugins: [require('autoprefixer')] }
}
}
]
- 如果用了
MiniCssExtractPlugin，也要确保它在postcss-loader之后执行 - 别在
css-loader的options.modules里开exportOnlyLocals，否则 PostCSS 拿不到完整样式块 - 检查
node_modules/autoprefixer/data/browsers.json是否被锁死旧版本（npx autoprefixer --info可验证当前生效的浏览器范围）
什么时候才需要 Sass 层写前缀？
极少数情况：比如你在 calc() 里动态拼接 env(safe-area-inset-bottom)，而 Autoprefixer 不处理函数内部值；或者项目还在用 Ruby Sass + static site generator，压根没 PostCSS 环境。
即便如此，也请守住底线：
- 只封装固定组合，如
@mixin flex-center { display: flex; justify-content: center; align-items: center; }—— 让 Autoprefixer 去补前缀，你只管语义 - 绝不写带参数的泛化
@mixin transition($prop, $time)，因为$prop是变量，Sass 无法判断它最终是不是transform - 所有手写前缀必须成对出现，且按
-webkit-→-ms-→-moz-→ 标准版顺序排列，否则旧 IE 直接失效
真正该花时间调的，是 browserslist 里的那几行——它决定了 Autoprefixer 加什么、不加什么，而不是在 Sass 里反复修补混合宏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
