PostCSS插件通过postcss-import实现样式文件导入，需将其置于插件列表首位，按@import语句静态合并文件，不支持glob路径，依赖正确路径配置与工程结构匹配。
PostCSS插件怎么自动导入样式文件
靠 postcss-import 实现，它不是“自动发现”所有样式，而是按你写的 @import 语句，在构建时提前合并、去重、解析路径。关键在配置和写法是否匹配工程结构。
- 必须把
postcss-import放在 PostCSS 插件列表最前面，否则后续插件（比如autoprefixer）看到的还是未展开的@import原始语句 -
@import路径不支持 glob（如@import "components/*.css"），只能写具体文件或目录索引（比如@import "components/index.css"） - 默认只处理
.css文件，若要导入.pcss或.scss，得配extensions选项，但注意：它只管后缀识别，不负责编译——那是postcss-scss或其他语法插件的事
统一管理样式入口文件的实际做法
所谓“统一入口”，本质是让所有样式最终都从一个根文件（比如 src/styles/index.css）单点引入，再由它逐级 @import 子模块。这不是魔法，而是靠人维护 import 树的完整性。
- 入口文件里别写实际样式规则，只做
@import，否则容易和子模块逻辑耦合 - 避免深层嵌套 import（比如 A → B → C → D），超过 3 层就难调试；PostCSS 不报错，但 source map 会失真，devtools 里定位不到原始位置
- 如果用 CSS Modules，
postcss-import默认不处理模块化后的类名，需配合postcss-modules，且二者顺序不能错：import → modules
常见错误：@import 报错 “Cannot resolve file”
90% 是路径解析失败，不是插件没装好。PostCSS 默认只在当前文件所在目录和 node_modules 查找，不会自动上溯到项目根目录。
- 检查
from参数是否传了正确的入口文件路径（尤其用 API 调用时），否则postcss-import不知道“当前目录”是哪 - 用相对路径时，
@import "../base/reset.css"的基准是被 import 的那个文件，不是入口文件 - 想用别名（如
@import "@styles/vars.css"），必须配resolve选项或借助postcss-alias这类插件，原生不支持 - Webpack 用户注意：
css-loader自带 import 解析，若同时开了postcss-import，可能重复解析导致路径错乱，建议关掉 css-loader 的import选项
性能与兼容性要注意什么
postcss-import 在构建时做静态分析，不运行 JS，所以本身很快；但 import 链太长或文件太多，会导致 AST 构建和 source map 生成变慢，尤其在 watch 模式下感知明显。
立即学习“前端免费学习笔记（深入）”；
- 不要在每个组件 CSS 里都
@import公共变量，改用postcss-simple-vars+postcss-import的plugins选项注入全局变量 - IE 下没问题，但它不解决 CSS 本身兼容性；如果 import 的某个子文件用了
:has()，该报错还是报错，跟 import 无关 - Vite 用户注意：Vite 内置的 CSS 处理已包含类似 import 行为，再加
postcss-import可能冲突，建议优先用 Vite 的css.preprocessorOptions或直接走其@import支持
