根本原因是被@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>块内的@import不会触发 PostCSS，除非声明lang="postcss"或该文件本身被识别为 PostCSS 源

postcss-import 怎么避免重复导入和循环依赖？

postcss-import默认就开了skipDuplicates: true，会用哈希表记录已导入路径，同一文件多次@import只处理一次。这对模块化项目很关键，否则构建时间会明显变长。

• 想故意保留重复（比如覆盖样式优先级），可临时关掉：atImport({ skipDuplicates: false })
• 遇到循环引用（A @import B，B 又 @import A），skipDuplicates: true能防止无限递归崩溃
• 注意：它只对本地文件和node_modules内可解析路径生效；远程 URL（如@import "https://..."）会被原样保留，不内联也不去重

如何让@import的CSS也加浏览器前缀？

加前缀这件事，只发生在 PostCSS 流程里。所以关键不是“怎么让@import加前缀”，而是“怎么让被@import的文件也进这个流程”。

• 确保postcss-import在插件链最前面（它负责内联），autoprefixer在后面（它处理最终合并后的 CSS）
• 检查browserslist配置是否包含目标旧浏览器，比如要 IE 11 就得写"IE >= 11"，不能只靠"last 2 versions"
• autoprefixer v10+ 默认关闭flexbox: '2009'，要生成-ms-flexbox就得手动开启：autoprefixer({ flexbox: '2009' })
• 写了手动前缀如display: -webkit-flex，autoprefixer反而会删掉它——它只补缺，不修旧

动态插入的CSS能被PostCSS处理吗？

不能。任何运行时行为都绕过 PostCSS：document.createElement('style')、el.innerHTML = '...'、甚至 HTML 中的<style>标签或<link rel="stylesheet">，全部无效。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

所有需要加前缀、压缩、转换的规则，必须写在构建工具能识别的源文件里（.css、.pcss），且该文件必须被明确纳入 PostCSS 流程——比如 Webpack 的test: /\.css$/规则命中，或 Vite 的css.postcss.plugins配置生效。

最容易被忽略的一点：你看到的最终 CSS 文件，是整个 PostCSS 链跑完的结果；中间任何一个环节断开（loader 顺序错、importLoaders 没设、browserslist 匹配为空），都会导致某部分样式“裸奔”。