autoprefixer 不会为 @import 的 css 加前缀，除非该文件真实进入 postcss 流程；常见原因是 vite 跳过 public/ 下文件、webpack 中 css-loader 的 importloaders＜1、路径别名未正确定义或 browserslist 配置过新导致无需补前缀。
PostCSS 自动补全前缀不会作用于任意引入的 CSS 文件，必须确保该文件真实进入 PostCSS 处理流水线——否则 @import 只是字符串复制，autoprefixer 根本看不到它。
为什么 @import 的 CSS 没加前缀？
常见现象：在 .css 里写了 @import './base.css';，但 base.css 里的 display: flex 没生成 -webkit-box。根本原因不是插件失效，而是构建工具没把 base.css 送进 PostCSS 流程。
- Vite 默认只处理
.css（且非public/下）、.pcss、.postcss后缀的文件；public/下的 CSS 直接原样拷贝，跳过所有 PostCSS 插件 - Webpack 中若
css-loader的importLoaders小于 1，@import的文件会被css-loader自己解析，不传给postcss-loader - 路径别名未在
vite.config.js的resolve.alias或 Webpack 的resolve.alias中正确定义，会导致解析失败，最终 fallback 成 raw 字符串引入（无报错）
如何让 @import 的 CSS 真正走 autoprefixer？
核心原则：所有要加前缀的样式，必须作为源文件参与构建，不能是运行时拼接或静态资源直引。
- 确保
@import的目标文件后缀为.css（Vite 5+ 默认支持）或.pcss，且不在public/目录下 - Webpack 用户检查
css-loader配置：importLoaders: 1是最低要求；若用了postcss-loader，它必须排在css-loader之后 - Vite 用户避免在
vite.config.js中用css.postcss.options.plugins覆盖默认配置——这会丢掉内置的autoprefixer；如需自定义，改用postcss.config.js - 如果
@import的是.less或.scss，必须已安装对应预处理器，否则 Vite/Webpack 会静默忽略该行
browserslist 配置太新也会导致“没加前缀”
写了 display: flex 却没看到任何厂商前缀？不是流程断了，而是 autoprefixer 查了 browserslist 后判断：当前目标浏览器全都原生支持，无需补。
- 例如配置
"Chrome >= 90", "Safari >= 14.1"，flex就不会加-webkit-；但gap在 Safari 14.1 仍需-webkit-gap，所以它会被补 - 运行
npx browserslist确认当前配置实际匹配哪些浏览器版本；再跑npx autoprefixer --info看哪些属性被标记为“需要前缀” - 不要依赖模糊语法如
"last 2 versions"——它对 Chrome 120+ 仍可能补-webkit-，而这是冗余的
最容易被忽略的是：autoprefixer 只处理构建时的源文件，对 JS 中动态插入的 <style></style>、el.style.xxx 或 CSS-in-JS 运行时生成的样式完全无感。这类场景得靠库自身逻辑（如 styled-components 的 runtime prefixing），和 PostCSS 无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
