autoprefixer未生效最常见原因是未正确接入构建流程：它仅处理sass编译后的标准css字符串，若webpack中postcss-loader未紧随sass-loader之后、vite中误覆默认配置或vue cli链路中断，css将绕过postcss直接输出；同时browserslist未覆盖目标旧浏览器（如ios 12.4）或源码中存在手动前缀/混用mixin，也会导致前缀缺失。
Autoprefixer根本没跑进Sass输出的CSS里
最常见原因：Autoprefixer是PostCSS插件，只处理标准CSS字符串，而Sass编译后若没被postcss-loader接住，就直接输出了。它不认.scss文件，也不管你写了多少@mixin。
实操建议：
- Webpack中检查
module.rules里less-loader或sass-loader之后是否紧跟着postcss-loader（注意：Webpack loader执行顺序从右往左，use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']才是正确链路） - Vite默认启用Autoprefixer，但若你在
vite.config.js里写了css.postcss对象，会覆盖默认配置——删掉该字段或显式引入autoprefixer插件 - Vue CLI下普通
<style></style>依赖vue-style-loader → css-loader → postcss-loader链路，需确认postcss-loader已安装且未被误禁用 - 验证方式：在
postcss.config.js里写require('xxx')故意触发报错，启动构建——不报错说明该文件根本没被读取
browserslist没覆盖到你要支持的旧浏览器
Autoprefixer加不加前缀、加哪些，100%取决于browserslist输出的实际浏览器范围。写“last 2 versions”可能让Chrome 120也带上-webkit-，但iOS Safari 12.4却因没被匹配而漏掉-webkit-flex。
实操建议：
- 把目标浏览器显式写进
package.json的browserslist字段，例如：["> 1%", "not dead", "iOS >= 12.4", "Safari >= 14.1", "IE >= 11"] - 运行
npx browserslist查看当前实际匹配的浏览器列表，确认是否包含你真正在测的设备 - 再跑
npx autoprefixer --info查具体属性支持情况，比如gap在iOS 12.4下压根不支持，Autoprefixer不会加前缀——不是bug，是按Can I Use数据做的合理裁剪 - 避免在
postcss.config.js里用browsers参数（已废弃），它优先级低于browserslist，还容易覆盖真实配置
Sass源码里写了手动前缀，Autoprefixer直接跳过整条声明
一旦你在.scss里写了display: -webkit-flex或@include flex-center这类Mixin，Autoprefixer会认为“你已接管”，整条规则不再处理——包括本该补的-ms-flexbox或-webkit-transform。
实操建议：
- 清空所有手写前缀：
display: flex、transform: rotate(45deg)、gap: 1rem——只写标准语法 - 删掉所有自定义Mixin，比如
.flex() { display: -webkit-box; display: -ms-flexbox; display: flex; }，这类写法冗余且干扰Autoprefixer判断 -
@supports块内不要写带前缀的fallback；块外的标准声明才由Autoprefixer扫描并补前缀 - IE8等极旧环境需特殊处理：
opacity不能靠Mixin封装，必须同时写filter: alpha(opacity=80)和-ms-filter: "alpha(opacity=80)"，并加zoom: 1触发hasLayout
VS Code插件或CLI临时处理 ≠ 构建流程生效
VS Code的Autoprefixer插件只是调本地postcss-cli，保存时改的是开发时的.css文件，但打包产物仍走构建流程。开发时看到前缀，上线后没了——大概率是构建时没走PostCSS。
实操建议：
- 别依赖编辑器插件保兼容，它不参与
npm run build流程 - 确保
postcss.config.js存在且导出plugins: [require('autoprefixer')] - 检查
node_modules里是否真装了autoprefixer和postcss，尤其升级后容易漏装对等依赖 - 如果用了
dart-sassCLI直接编译（如sass input.scss output.css），它完全不走PostCSS——必须额外套一层postcss output.css -o final.css
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
