Autoprefixer 不处理 @import 的 CSS 是因文件未进入 PostCSS 流程；Webpack 需设置 css-loader 的 importLoaders: 1，Vite 需确保路径正确、文件在 src/ 下且格式受支持，否则 @import 内容被跳过。
Autoprefixer 不会在 @import 语句执行时动态加前缀——它只在构建阶段一次性处理整个 CSS 文件流，且必须确保被 @import 引入的文件也进入 PostCSS 流程。
为什么 @import 的 CSS 没加前缀？
常见现象：主文件写了 @import './base.css';，但 base.css 里的 display: flex 没生成 -webkit-box 或 -ms-flexbox。根本原因不是 Autoprefixer 失效，而是那条 @import 被跳过了 PostCSS 处理。
- Webpack 中：
css-loader默认不把@import的内容传给后续 loader，除非设置importLoaders: 1（或更高） - Vite 默认支持，但仅限于
.css文件之间互相@import；若@import的是.scss或未被 Vite 解析的路径（如../node_modules/xxx/index.css），可能绕过 PostCSS - Vue 单文件组件中：
<style></style>块内的@import不触发 PostCSS，除非显式声明lang="postcss"或该文件本身被构建工具识别为 PostCSS 源
css-loader 的 importLoaders 必须设对
这是 Webpack 用户最常漏掉的一环。即使你配了 postcss-loader，如果 css-loader 没把 @import 内容“推”给它，Autoprefixer 就完全看不到那些样式。
-
importLoaders: 0→ 只处理当前文件，@import的内容被原样保留，不进 PostCSS -
importLoaders: 1→ 当前文件 + 它@import的一级文件，都会进postcss-loader -
importLoaders: 2→ 还包括被二级@import引入的文件（比如 a.css → @import b.css → @import c.css）
推荐统一设为 importLoaders: 1，并在 postcss-loader 紧跟其后：
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
{
loader: 'postcss-loader',
options: { postcssOptions: { plugins: [require('autoprefixer')] } }
}
]
Vite 中 @import 失效的三个典型场景
Vite 默认集成 PostCSS，但以下情况会导致 @import 的 CSS 被跳过：
- 路径用了别名但没在
vite.config.js的resolve.alias中正确定义，导致解析失败，最终 fallback 到 raw 字符串引入 -
@import的是.less或.scss文件，而项目没装对应预处理器，Vite 会静默忽略该行（不报错也不处理） - 文件放在
public/目录下，Vite 不会对public/中的任何资源运行 PostCSS —— 它只处理src/下的源文件
验证方式：临时把 @import 改成内联写法，比如直接把 base.css 内容粘到主文件里，看前缀是否出现。如果出现了，问题一定出在 @import 路径或加载链路上。
@import 和 Tailwind / CSS-in-JS 混用时的隐性冲突
当项目同时用了 Tailwind 和手写 @import 引入的 CSS，容易误判前缀缺失。Tailwind 的 preflight 重置样式本身已带前缀，但它不会影响你 @import 的自定义 CSS —— 后者仍需独立走 PostCSS 流程。
- Tailwind 的配置（如
content字段）只扫描模板文件，不扫描@import的 CSS，所以不会“顺带”触发 Autoprefixer - CSS-in-JS 库（如 Emotion、Styled-components）生成的样式在 JS 运行时注入，完全脱离 PostCSS 构建流程，
@import在其中只是字符串拼接，毫无意义 - 如果你在
postcss.config.js里同时启用了 Tailwind 插件和 Autoprefixer，它们会按顺序执行：Tailwind 展开工具类 → Autoprefixer 扫描全部输出结果 → 加前缀。但前提是所有输入都进了这个 pipeline
真正容易被忽略的是：Autoprefixer 对 @import 的支持，从来不是“自动连通”，而是依赖 loader 配置、路径解析、构建阶段介入时机三者严丝合缝。少一个环节，就等于那部分 CSS 永远活在无前缀的真空里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
