autoprefixer 不会自动生效，必须被 vite 正确加载且 css 文件进入 postcss 流程；常见问题包括 postcss.config.js 未被读取、@import 路径错误、browserslist 配置不当、属性本身无需前缀或不支持降级。
autoprefixer 不会自动生效，它必须被 Vite 正确加载、且 CSS 文件必须真实进入 PostCSS 处理流程——绝大多数“没加前缀”的问题，根源都在这一环断了。
确认 postcss.config.js 是否被 Vite 实际读取
Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.js 中写了 css.postcss 字段（哪怕只配了个空对象），就会覆盖默认行为，导致 postcss.config.js 被完全忽略。
- 最简单的验证方式：在
postcss.config.js里写require('xxx-missing-plugin')，启动npm run dev——不报错就说明该文件根本没被加载 - Vite 只认项目根目录下的
postcss.config.js，放错位置（比如放在src/下）等于没配 - 别在
vite.config.js里手动配置css.postcss.plugins，除非你明确知道自己在覆盖什么；线上项目更推荐删掉该字段，让 Vite 自动读取配置文件
@import 的 CSS 文件为什么没加前缀？
常见现象：主文件写了 @import './base.css';，但 base.css 里的 display: flex 没生成 -webkit-box。这不是插件失效，而是构建工具根本没把 base.css 送进 PostCSS 流程。
- Vite 默认只处理非
public/目录下的.css、.pcss、.postcss文件；public/下的 CSS 是直接拷贝，跳过所有 PostCSS 插件 - 确保
@import的路径指向的是源码目录（如src/assets/base.css），而不是public/css/base.css - 如果用了路径别名（比如
@/styles/base.css），必须在vite.config.js的resolve.alias中正确定义，否则解析失败会 fallback 成字符串复制，autoprefixer完全看不见它
browserslist 配置太宽或太窄，前缀就补得毫无意义
autoprefixer 严格按 browserslist 输出前缀，不是靠经验判断。“last 2 versions” 可能给 Safari 14.1 补 -webkit-gap，但它原生就支持；而 “> 1%” 又可能拉进大量 IE11 用户，生成一堆 -ms- 前缀，但你的项目根本不支持 IE。
- 优先把
browserslist写在package.json里，避免多处维护；不要用autoprefixer插件内的overrideBrowserslist参数 - 线上项目推荐显式声明，例如：
"iOS >= 13"、"Safari >= 14.1"、"Chrome >= 90" - 运行
npx browserslist看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info查哪些属性会被处理——别只凭记忆写 CSS
autoprefixer 只补前缀，不转译语法，这点最容易被误判
写了 gap: 1rem 却没看到前缀？可能是目标浏览器全都原生支持，autoprefixer 判定无需补；写了 place-items: center 在 Safari 14.1 下不生效？不是前缀问题，是该属性本身未被 Safari 支持，autoprefixer 不会把它拆成 align-items + justify-items。
-
aspect-ratio、container、scrollbar-gutter等新属性目前无主流前缀需求，autoprefixer直接跳过 - 若需降级语法（如把
gap转成margin），得用postcss-preset-env，不是autoprefixer的职责 - IE11 的
display: -ms-grid和现代grid差异极大，加了前缀 ≠ 能用；别指望靠前缀兼容语义级差异
autoprefixer 才看得见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
