autoprefixer 只在构建阶段运行，不处理运行时引入或动态插入的 css；其前缀添加取决于 browserslist 配置与目标浏览器兼容性，且需确保构建工具正确加载 postcss 流程。
PostCSS 的 autoprefixer 插件不会在 CSS 引入时（比如 <link> 或 <style></style> 标签）自动加前缀——它只在构建阶段处理源 CSS 文件，运行时引入的样式完全绕过它。
autoprefixer 根本不运行于 HTML 加载阶段
浏览器打开 index.html 时，所有 CSS 已是静态字节流；autoprefixer 是 Node.js 环境下的 PostCSS 插件，只在 Webpack/Vite 等工具编译过程中执行。你在 <style>div { display: flex; }</style> 里写什么，都不会触发它。
- 用
live-server或直接双击 HTML 打开，file://协议下没有构建过程，autoprefixer完全不参与 - DevTools 里手动改样式属于运行时覆盖，和
autoprefixer无关 -
import './style.css'能生效，前提是该文件被构建工具识别为需走 PostCSS 流程（如 Vite 的src/下路径）
为什么写了 display: flex 却没生成 -webkit-flex？
最常见原因是 browserslist 配置太新，导致 autoprefixer 认为无需加前缀。它不是“有 flex 就加”，而是查 Can I Use 数据后按目标浏览器决定。
- 检查
package.json或.browserslistrc：如果只写"last 2 versions"，Chrome/Safari 最新版已原生支持flex，就不会输出-webkit-前缀 - 要兼容旧环境（如 iOS Safari 10、IE 11），必须显式包含，例如：
"iOS >= 10", "IE >= 11" - 运行
npx browserslist查看当前配置实际匹配哪些版本；再跑npx autoprefixer --info确认哪些属性会被处理
Vite / Webpack 中确保 CSS 文件真被 autoprefixer 处理
配置存在 ≠ 实际执行。很多项目有 postcss.config.js，但构建工具根本没加载它。
- Vite：要求
postcss.config.js在项目根目录；若在vite.config.ts中显式配置了css.postcss，可能意外覆盖默认行为 - Webpack：
postcss-loader必须放在css-loader之后、style-loader之前；且css-loader的importLoaders至少为1，否则@import的 CSS 不进 PostCSS 流程 - Vue 项目：
<style lang="postcss"></style>显式声明才走 PostCSS；普通<style></style>块依赖vue-style-loader+css-loader链路中是否含postcss-loader
动态插入 CSS（JS 注入）无法触发 autoprefixer
通过 document.createElement('style') 或 el.innerHTML = '...' 插入的字符串样式，构建时不可见，autoprefixer 完全无法处理。
- 所有需加前缀的规则，必须写在
.css、.pcss等由构建工具解析的源文件中 - 避免在 JS 中拼接带 CSS 属性的字符串（如
el.style.display = 'flex'）——这不需要前缀，但也不受autoprefixer保护 - 若需运行时控制样式（如主题色），优先用 CSS Custom Properties（
--primary-color），它们无前缀需求，兼容性由定义位置决定
最容易被忽略的一点：autoprefixer 不转译语法，只补前缀。写了 gap: 1rem 没前缀是正常的（caniuse 显示无主流前缀需求）；写了 place-items: center 在 Safari 14.1 不生效，也不是前缀问题，而是该属性本身在 Safari 中尚未支持——autoprefixer 不会、也不能把它降级成 align-items + justify-items。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
