根本原因是被@import引入的文件未进入postcss处理链；webpack需设importloaders: 1，vite对非同级.css路径可能跳过，vue单文件组件需声明lang="postcss"或识别为postcss源。
为什么@import的CSS没进PostCSS流程？
根本原因不是插件挂了，而是被@import引入的文件压根没触发 PostCSS 处理链——它只是被原样拼进主文件，没走postcss-loader或对应插件管道。
- 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 源
postcss-import 怎么避免重复导入和循环依赖？
postcss-import默认就开了skipDuplicates: true，会用哈希表记录已导入路径，同一文件多次@import只处理一次。这对模块化项目很关键，否则构建时间会明显变长。
- 想故意保留重复（比如覆盖样式优先级），可临时关掉：
atImport({ skipDuplicates: false }) - 遇到循环引用（A
@importB，B 又@importA），skipDuplicates: true能防止无限递归崩溃 - 注意：它只对本地文件和
node_modules内可解析路径生效；远程 URL（如@import "https://..."）会被原样保留，不内联也不去重
如何让@import的CSS也加浏览器前缀？
加前缀这件事，只发生在 PostCSS 流程里。所以关键不是“怎么让@import加前缀”，而是“怎么让被@import的文件也进这个流程”。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 确保
postcss-import在插件链最前面（它负责内联），autoprefixer在后面（它处理最终合并后的 CSS） - 检查
browserslist配置是否包含目标旧浏览器，比如要 IE 11 就得写"IE >= 11"，不能只靠"last 2 versions" -
autoprefixerv10+ 默认关闭flexbox: '2009'，要生成-ms-flexbox就得手动开启：autoprefixer({ flexbox: '2009' }) - 写了手动前缀如
display: -webkit-flex，autoprefixer反而会删掉它——它只补缺，不修旧
动态插入的CSS能被PostCSS处理吗？
不能。任何运行时行为都绕过 PostCSS：document.createElement('style')、el.innerHTML = '...'、甚至 HTML 中的<style></style>标签或<link rel="stylesheet">，全部无效。
所有需要加前缀、压缩、转换的规则，必须写在构建工具能识别的源文件里（.css、.pcss），且该文件必须被明确纳入 PostCSS 流程——比如 Webpack 的test: /\.css$/规则命中，或 Vite 的css.postcss.plugins配置生效。
最容易被忽略的一点：你看到的最终 CSS 文件，是整个 PostCSS 链跑完的结果；中间任何一个环节断开（loader 顺序错、importLoaders 没设、browserslist 匹配为空），都会导致某部分样式“裸奔”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
