PostCSS自动加前缀失效主因是browserslist配置过新，导致autoprefixer认为无需加前缀；需检查.browserslistrc或package.json配置，确保覆盖旧版浏览器，并确认autoprefixer在PostCSS配置中显式调用。
PostCSS自动加前缀为什么没生效
常见现象是写了 display: flex，但编译后 CSS 里还是没出现 -webkit-box 或 -ms-flexbox。根本原因不是插件没装，而是 autoprefixer 默认只处理「能被当前目标浏览器支持的属性」——如果你的 browserslist 配置太新（比如只写 last 2 versions），它就认为不需要加前缀。
实操建议：
- 检查项目根目录是否有
.browserslistrc或package.json里的browserslist字段，确保包含旧版浏览器，例如：Chrome >= 49, Safari >= 10, iOS >= 10, Edge >= 16 - 确认 PostCSS 配置中
autoprefixer是作为插件显式调用的，不是靠其他工具（如 Create React App）隐式注入——后者可能绕过你的配置 - 如果用的是 Webpack +
postcss-loader，注意sourceMap开关会影响插件执行顺序；关闭 sourceMap 有时反而让 autoprefixer 正常工作
如何避免 CSS 注入时前缀丢失
CSS 注入（比如通过 style 标签动态插入、或 import 在 JS 中）本身不触发 PostCSS 处理。PostCSS 只作用于构建时的源文件，不是运行时的字符串。
实操建议：
- 所有要加前缀的样式，必须写在
.css或.pcss文件里，由构建工具统一走 PostCSS 流水线 - 避免在 JS 中拼接带 CSS 属性的字符串，例如
el.style.display = 'flex'不需要前缀，但el.style.webkitFlex = '1'是手动补丁，不可维护 - 若必须运行时生成样式（如主题色变量），用 CSS Custom Properties 替代，它们本身无前缀需求；浏览器兼容性由
:root定义位置决定，和 autoprefixer 无关
autoprefixer 的 remove 选项真能删旧前缀吗
可以，但默认开启，且只删「已过时、目标浏览器早已原生支持」的前缀。比如 -webkit-flex 在 Chrome 29+ 就废弃了，如果 browserslist 设为 Chrome >= 49，autoprefixer 就会把它删掉。
实操建议：
- 不要手动设
remove: true—— 这是默认行为；想保留某些前缀（比如为调试），用remove: false，但会增大 CSS 体积 - 删不掉的旧前缀，往往是因为
browserslist配置太宽（如包含IE 11），导致-ms-前缀仍被视为必要 - 用
npx autoprefixer --info查看当前配置下哪些属性会被加/删前缀，比猜更可靠
Vue / React 项目里 CSS-in-JS 怎么加前缀
像 styled-components 或 emotion 自带运行时前缀逻辑，但只覆盖部分属性（如 flex、transform），不处理 @keyframes 或伪元素选择器中的属性，而且无法控制具体加哪些前缀。
实操建议：
- 优先把复杂动画、多状态布局抽成独立
.css文件，走 PostCSS 全流程；JS 中只传 class 名 - 如果坚持用 CSS-in-JS，
styled-componentsv6+ 支持通过stylis-plugin-rtl类插件扩展，但 autoprefixer 插件不能直接接入——它依赖 AST 解析，而 stylis 是正则解析器 - 别指望
postcss-js能处理 JS 里的模板字符串；它只适合极简场景（如css({ display: 'flex' })），且不支持嵌套、媒体查询等
真正容易被忽略的点：PostCSS 不是魔法，它只改你给它的输入。CSS 注入、JS 拼串、服务端渲染时的 style 标签内容，只要没进构建管道，autoprefixer 就完全看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
