@import会强制串行加载并触发fouc，因其是css语法而非html级声明，浏览器须先下载解析当前css才能发起下个请求，导致关键样式延迟300–800ms且预加载器不可见；安全替换需按依赖顺序将reset.css、layout.css、button.css等转为中严格排序的，首屏关键css必须内联且≤10kb，否则fouc风险持续存在。
为什么@import会强制串行加载并触发FOUC
@import不是HTML级资源声明，而是CSS语法，浏览器必须先下载、解析完当前CSS文件，才能识别里面的@import语句，再发起下一个请求。这导致关键样式链断裂：比如main.css里写了@import "header.css"，那么header.css至少晚一个RTT才开始加载，首屏必需样式就绪时间直接拉长300–800ms。更糟的是，预加载器（preload scanner）完全看不到@import，连HTTP/2多路复用都用不上。
如何安全替换页面中所有@import为
不能简单把@import语句删掉、换成<link>标签就完事——顺序错乱会导致层叠失效。比如原CSS中有：
@import "reset.css"; @import "layout.css"; @import "components/button.css";
需按依赖顺序转成HTML中的<link>，且严格保持先后：
-
reset.css（重置类）必须放在最前 -
layout.css（栅格、Flex工具类）紧随其后 -
button.css等组件样式放最后，确保不被覆盖 - 每个
<link rel="stylesheet">都要放在内、早于任何<script></script>
内联首屏关键CSS是绕过@import问题的唯一确定解
只要还依赖@import链路，就永远存在FOUC风险。真正可控的做法是：把首屏必需样式（如.header、.hero、[v-cloak]、基础字体定义）直接内联进<style></style>标签，体积控制在≤10KB。这样浏览器在解析HTML字节流时就同步构建CSSOM，首次绘制前样式已就位。
注意：<style></style>必须放在最顶部，不能加media属性，否则浏览器跳过阻塞；别手动维护——用critters（Vite）、critical（CLI）或Next.js内置工具自动生成，否则极易过期。
验证是否真被阻塞：用DevTools看Initiator和Coverage
打开Chrome DevTools → Network → 筛选css → 查看Initiator列：如果不是parser，说明该CSS根本没进阻塞链；再切到Coverage tab → 刷新页面 → 看绿色高亮部分是否覆盖了首屏所有选择器。如果[v-cloak]没被标绿，或者@import导入的文件里有大量灰色未使用规则，就说明内联内容不全或@import还在偷偷拖后腿。
最容易被忽略的是：哪怕你把关键CSS内联了，如果外链CSS返回的Content-Type是text/plain而不是text/css，浏览器照样拒绝解析，FOUC照闪。检查Network面板每个CSS请求的Response Headers。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
