autoprefixer插件只在构建阶段运行，不处理html中、或js动态插入的css；@import未加前缀主因是被引入文件未进入postcss流程，需确保构建工具正确配置importloaders及browserslist。
PostCSS 的 autoprefixer 插件根本不会在 CSS 引入时（比如 <link>、<style></style> 标签或 JS 动态插入）运行——它只在构建阶段处理源文件，运行时引入的样式完全绕过它。
为什么 @import 的 CSS 没加前缀？
常见现象：主文件写了 @import './base.css';，但 base.css 里的 display: flex 没生成 -webkit-flex 或 -ms-flexbox。根本原因不是插件失效，而是被 @import 引入的文件压根没进 PostCSS 流程。
- Webpack 中：
css-loader默认不把@import内容传给后续 loader，必须显式设importLoaders: 1 - Vite 默认支持同级
.css文件间的@import，但若引入的是.scss、../node_modules/xxx/index.css等路径，可能直接跳过 PostCSS - Vue 单文件组件中：
<style></style>块内的@import不触发 PostCSS，除非声明lang="postcss"或该文件本身被识别为 PostCSS 源
autoprefixer 没输出 -ms-flexbox 的真实原因
不是插件坏了，而是它按需添加——查 browserslist 配置后发现目标浏览器已原生支持，就跳过前缀。比如只写 "last 2 versions"，Chrome/Safari 最新版已支持 flex，自然不加 -webkit-。
- 要兼容 IE 11，
browserslist必须显式包含"IE >= 11"，不能靠模糊表达 - Autoprefixer v10+ 默认关闭
flexbox: '2009'，如需-ms-flexbox，得在配置里手动开启：autoprefixer({ flexbox: '2009' }) - 写了手动前缀如
display: -webkit-flex，autoprefixer反而会删掉它——它只补缺，不修旧
如何确认当前配置真正在起作用？
别只看配置文件是否存在，得验证构建链路是否真正把 CSS 文件推给了 autoprefixer。
- 运行
npx browserslist查当前实际匹配的浏览器列表 - 再跑
npx autoprefixer --info看哪些属性会被处理、哪些不会 - Webpack 用户检查
css-loader是否在postcss-loader之前，且importLoaders≥ 1 - Vite 用户确认
vite.config.ts没覆盖默认css.postcss，或已显式返回含autoprefixer()的对象
最常被忽略的一点：动态插入的 CSS（document.createElement('style') 或 el.innerHTML = '...'）永远无法被 autoprefixer 处理——所有需加前缀的规则，必须写在构建工具能解析的源文件（.css、.pcss）里，且确保该文件被明确纳入 PostCSS 流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
