PostCSS需postcss-import插件在最前展开@import，否则浏览器阻塞渲染；路径须标准化避免重复加载；node_modules中CSS模块自动解析；多级@import非运行时优化，应内联关键样式、异步加载非关键样式。
PostCSS 本身不处理 @import，必须靠 postcss-import 插件在构建时展开，否则所有 @import 都原样输出到最终 CSS 中，浏览器 runtime 加载、阻塞渲染。
postcss-import 必须放在插件链最前面
它负责解析路径、去重、读取内容并内联，后续插件（如 postcss-nesting、autoprefixer）才能处理合并后的完整 AST。顺序错会导致：
-
@layer或&嵌套语法被当成普通字符，直接失效 -
autoprefixer看到的还是未展开的@import "reset.css"，不加前缀 - 别名路径（如
@import "@styles/vars.css"）无法被 resolve
正确顺序示例（postcss.config.js）：
module.exports = {
plugins: [
require('postcss-import')(), // 第一个
require('postcss-nesting')(),
require('autoprefixer')(),
]
}
@import 路径必须标准化，否则重复加载
postcss-import 默认启用 skipDuplicates: true，但只对**完全一致的字符串路径**生效。以下写法会被视为两个文件：
立即学习“前端免费学习笔记（深入）”；
-
@import "./vars.css"vs@import "src/vars.css" -
@import "~styles/vars.css"vs@import "src/styles/vars.css"
解决方法：
- 统一用相对路径（推荐），所有
@import都以当前文件为基准 - 若用别名，必须配
resolve钩子，返回绝对路径，不能只改字符串 - 避免混用
~、@/、src/多种前缀风格
node_modules 中的 CSS 模块不用额外配 root
只要包的 package.json 有 "main" 或 "style" 字段，postcss-import 就能自动解析。例如：
-
@import "normalize.css"→ 自动找node_modules/normalize.css/normalize.css -
@import "@picocss/pico/css/pico.min.css"→ 直接按路径读取
常见错误是手动加 path: ["node_modules"]，反而干扰默认模块解析逻辑；只有当你引入的是没声明 main/style 的私有包时，才需要显式配置 path 或 resolve。
别把多级 @import 当成运行时优化手段
postcss-import 是开发期组织工具，不是性能方案。它把 A.css → B.css → C.css 展开成一个大文件，但这个文件仍是 render-blocking 资源。Lighthouse 提示 “Eliminate render-blocking resources” 就说明你误用了它。
真正要做的：
- 识别首屏关键样式，内联进 HTML
- 非关键 CSS（如弹窗、评论区）拆成异步
<link rel="preload" as="style" onload="this.rel='stylesheet'"> - 避免超过 3 层嵌套 import，否则 source map 定位失真，devtools 里点不到原始位置
路径解析、AST 结构、构建时展开——这些细节一旦错位，问题往往不报错，只表现为样式丢失或行为异常，排查起来比语法错误更耗时间。
