postcss 自动加前缀依赖 autoprefixer 插件而非 postcss 本身，需单独安装并显式配置在 plugins 中，且严格依据 browserslist 目标环境生效；vite 默认内置，css-in-js 库前缀逻辑与之无关。
PostCSS 自动加前缀依赖的是 autoprefixer，不是 PostCSS 本身
PostCSS 只是解析和操作 CSS 的工具链基础，真正负责识别兼容性、插入 -webkit-、-moz- 等前缀的是插件 autoprefixer。没装它，配置再全也没用。
常见错误：只装了 postcss 和 postcss-loader，却漏掉 autoprefixer，结果构建后 CSS 完全没加任何前缀。
- 安装命令必须包含：
npm install -D autoprefixer（或yarn add -D autoprefixer） -
autoprefixer依赖caniuse-lite数据库，如果长期不更新，可能误判新特性支持情况；建议定期运行npx browserslist@latest --update-db - 它不处理自定义属性（
--my-var）、CSS 变量、@layer或嵌套语法——那些得靠其他插件，比如postcss-nested
如何正确配置 browserslist 决定加哪些前缀
autoprefixer 不凭感觉加前缀，而是严格按 browserslist 配置的目标环境来判断。写错目标，就可能该加的没加，不该加的乱加。
错误示例："last 2 versions" 已被弃用，且对现代浏览器（如 Chrome 120+）可能过度补全；= 5%" 缺少地域上下文，全球/中国用户占比差异极大。
- 推荐写法（放
package.json中）："browserslist": ["defaults", "not dead"]
—— 这是autoprefixer官方默认策略，覆盖主流、有自动更新能力的浏览器，兼顾精简与兼容 - 若需明确控制，用具体版本：
["Chrome >= 90", "Firefox >= 89", "Safari >= 14.1"]，避免模糊表述 - 配置生效优先级：项目根目录
.browserslistrc>package.json中字段 >postcss.config.js里硬编码（不推荐硬编码）
postcss.config.js 里必须显式启用 autoprefixer
即使装了包、写了 browserslist，如果 postcss.config.js 没把它放进 plugins 数组，它就完全不运行。
典型错误：把 autoprefixer 放在数组末尾但没加括号，或误写成字符串 "autoprefixer"（Webpack 5+ 默认不支持字符串插件写法）。
- 正确写法（ESM / CommonJS 均可）：
module.exports = {<br> plugins: [<br> require('autoprefixer'),<br> // 其他插件…<br> ]<br>} - 可传入选项覆盖
browserslist，但一般不需要：require('autoprefixer')({ overrideBrowserslist: ['> 1%'] }) - 注意：Vite 项目默认已内置
autoprefixer，无需手动配，除非你禁用了默认 PostCSS 配置
验证是否真生效？别只看输出 CSS 文件
光打开编译后的 CSS 文件找 -webkit-transform 并不可靠——有些属性（如 display: flex）在目标浏览器中已原生支持，autoprefixer 就不会加前缀；而有些写法（如 gap 在旧 Safari 中需 -webkit-gap）才真正触发补全。
- 最直接方式：在源码中写一个明确需要前缀的声明，例如：
transform: rotate(45deg);→ 应生成-webkit-transform: rotate(45deg); - 用
npx autoprefixer --info查看当前配置实际覆盖的浏览器列表 - 开发时开启 Webpack/Vite 的 CSS source map，定位到原始 .css/.scss 行，对比编译后对应位置是否插入前缀
- 注意：CSS-in-JS 库（如 styled-components）通常自带前缀逻辑，和 PostCSS 无关，别混在一起调试
browserslist 的隐式继承行为——子依赖里的 package.json 如果也带这个字段，可能意外覆盖你的配置。检查时别只翻自己项目的根目录，用 npx browserslist 命令直接输出最终生效列表最稳妥。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
