postcss-import仅用于开发期模块组织，不解决首屏阻塞；应提取critical.css内联，异步加载非关键CSS，并确保其在PostCSS插件链中优先执行以保障嵌套和层声明正确。
postcss-import 能合并 CSS 文件，但它不减少首屏加载延迟，反而可能加剧阻塞渲染——关键不在“能不能合并”，而在“要不要在构建早期就全量合并”。
postcss-import 合并后仍是单个阻塞资源
- 浏览器解析 HTML 遇到
<link rel="stylesheet">，会立即暂停 DOM 构建，下载、解析、生成 CSSOM 后才继续 - 即使你用
postcss-import把button.css、header.css、modal.css全塞进app.css，这个 120KB 的文件仍全程阻塞首帧渲染 - 尤其当其中 80% 样式只用于滚动后才出现的模块（比如弹窗、评论区），纯属白下、白析、白占内存
常见错误现象：
- 页面白屏时间变长，Lighthouse 的 “Eliminate render-blocking resources” 评分下降
- Network 面板看到
app.css下载耗时长，且始终排在index.html后面被阻塞
正确做法是：
-
postcss-import仅用于开发期模块组织，保持@import语义清晰 - 构建阶段由打包器（Vite/Webpack）接管依赖图，产出多个带 hash 的 CSS chunk
- 关键样式抽离为
critical.css，内联进 - 非关键 CSS 用
rel="preload"异步加载：<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
postcss-import 的配置顺序直接影响嵌套规则生效
- 如果你在 CSS 中用了
@layer或postcss-nesting，postcss-import必须放在它们之前 - 否则：
-
@import "button.css";里的嵌套写法（如&.btn { &--primary { ... } }）会被提前拆成零散规则，再传给 nesting 插件时已无嵌套结构 -
@import "theme.css" layer(theme);的层声明可能丢失，导致层优先级失效
-
典型错误配置：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: [
require('postcss-nesting'), // ❌ 错了，nesting 在 import 前
require('postcss-import'),
]
};应改为：
module.exports = {
plugins: [
require('postcss-import'), // ✅ import 最先执行
require('postcss-nesting'),
require('autoprefixer'),
]
};其他要点：
-
skipDuplicates: true是默认值，避免同一路径被多次展开（比如 A.css 和 B.css 都@import "vars.css"） - 不要手动设置
root指向node_modules；它会自动按 Node.js 模块解析规则找node_modules/xxx/dist/index.css - 若需支持
@import "<a href="https://www.php.cn/link/a8b32485ea3dafd7c06f87afe4f7c6d2">https://www.php.cn/link/a8b32485ea3dafd7c06f87afe4f7c6d2</a>"，必须额外加postcss-import-url插件，原生postcss-import不处理远程 URL
嵌套 @import 会破坏你预期的顺序
-
main.css写了@import "a.css"; @import "b.css"; - 而
a.css里又写了@import "c.css"; - 最终输出顺序是：
c.css → a.css → b.css，不是你写的线性顺序
这意味着：
- 变量覆盖失效：如果
c.css定义--color-primary: red，b.css想重写为blue，但因c在最后，blue反而被red覆盖 -
@layer层叠错乱：本想layer(base)在前、layer(theme)在后，结果因嵌套导入被颠倒
解决方案很简单：
- 禁止跨文件
@import，所有@import都写在入口文件（如index.css）里 - 让每个被导入文件保持“无副作用”：只定义变量、类名、层，不依赖其他导入文件的内容
- 若真需复用逻辑，改用 CSS 自定义属性 +
:where()或:is()控制作用域，而非靠导入顺序博弈
真正影响加载性能的，从来不是“几个文件”，而是“哪些字节在什么时候进入渲染流水线”。postcss-import 是个好工具，但它解决的是工程组织问题，不是性能瓶颈本身。把合并当成优化终点，容易忽略 critical CSS 提取、异步加载、media 条件分发这些更实际的控制点。
