autoprefixer必须经postcss实际执行且css完整流经处理链才生效；90%失效源于postcss.config.js未被加载、loader顺序错误（如postcss-loader不在css-loader后）、browserslist配置不当或css未进入postcss流程。
Autoprefixer 不是装完就能生效的开关，它必须被 PostCSS 实际执行，且你的 CSS 必须完整流经这道处理链——90% 的“没加前缀”问题，都卡在这一步断掉。
postcss.config.js 是否真被构建工具读取？
很多项目有 postcss.config.js，但构建工具根本没加载它。Vite 5+ 默认启用 PostCSS，但如果你在 vite.config.js 中显式写了 css.postcss，反而可能覆盖默认行为；Webpack 则完全依赖你手动配置 postcss-loader。
- 实操建议：在
postcss.config.js里加一行require('xxx-missing-plugin')，然后启动构建——不报错就说明该文件根本没被读取 - Vite 要求
postcss.config.js必须放在项目根目录；Webpack 要求postcss-loader必须在css-loader之后，且css-loader的importLoaders≥ 1，否则@import的 CSS 不进 PostCSS 流程 - Vue CLI 默认集成，但只有
<style lang="postcss"></style>才走 PostCSS；普通<style></style>块需确认vue-style-loader+css-loader链路中是否含postcss-loader
browserslist 配置错误会导致前缀全乱套
autoprefixer 完全按 browserslist 输出前缀，不是靠经验或猜测。“last 2 versions” 会强制给 Safari 12 加 -webkit- 前缀，而它早已原生支持 gap；“> 1%” 可能拉进大量 IE11 用户，导致生成一堆 -ms- 前缀，但你的项目根本不支持 IE。
- 实操建议：优先把
browserslist写在package.json里，避免多处维护 - 不要用
autoprefixer插件内的overrideBrowserslist参数（已被废弃） - 线上项目推荐显式声明，例如：
"iOS >= 13"、"Safari >= 14.1"、"Chrome >= 90"，比模糊语法更可控 - 运行
npx browserslist查看当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看哪些属性会被处理——别只凭记忆写 CSS
Less/Sass 文件必须先编译成 CSS 才能进 Autoprefixer
postcss-loader 必须在 less-loader 或 sass-loader 之后执行。Less 编译输出的是标准 CSS 字符串，autoprefixer 只能处理这种格式；如果顺序错了（比如 use: ['postcss-loader', 'less-loader']），它收到的其实是带嵌套、变量、Mixin 的原始 Less 语法，直接跳过或报错。
- Webpack 示例正确顺序：
['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] - Vite 对
.less文件默认走自己的编译链，但若你自定义了css.preprocessorOptions.less，仍需确认未绕过 PostCSS - 注意：Tailwind 已内置 Autoprefixer 逻辑，额外配一遍可能冲突；CSS-in-JS（如 Emotion）生成的样式是运行时动态字符串，PostCSS 通常不处理
写了新属性却没前缀？可能是 caniuse 数据里压根不需要
autoprefixer 只补前缀，不转译语法。它不会把 gap: 1rem 降级成 margin 模拟，也不会把 place-items: center 拆成 align-items + justify-items；反过来，IE11 的 display: -ms-grid 和现代 grid 差异极大，加了前缀也不等于能用。
- 常见错误现象：
aspect-ratio: 1/1没任何前缀 → 正常，caniuse 显示该属性无主流前缀需求 -
place-items: center在 Safari 14.1 下不生效 → 不是前缀问题，是该属性在 Safari 中需手动拆解为align-items+justify-items -
grid-template-areas在 IE11 完全空白 →autoprefixer确实加了-ms-grid，但 IE 的 Grid 实现和现代标准差异极大，不能指望自动兼容
最容易被忽略的一点：Autoprefixer 不处理已压缩/已发布的 CSS，也不处理 HTML 中的 style 属性或 JS 动态插入的样式字符串——它的作用域严格限定在构建时经过 PostCSS 处理的 CSS 文件流内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
