@import会触发FOUC，因其强制串行加载、无法被预加载器识别，且IE等旧浏览器延迟执行，导致HTML先渲染后套样式；v-cloak失效同理，因依赖的样式未及时就绪。
为什么@import会触发FOUC（无样式内容闪烁）
@import 不是 HTML 原生加载机制，它在 CSS 文件内部使用时，会强制串行解析：浏览器必须先下载并解析完当前 CSS 文件，才能发现并发起 @import 指向的下一个请求。这意味着关键样式无法被预加载器提前抓取，加载链路拉长，首屏 CSS 就绪时间显著延迟。
更严重的是，IE 及部分旧版浏览器会等到 DOM 完全构建完毕后才执行 @import，此时 HTML 已开始渲染，但样式尚未就位——结果就是用户先看到裸 DOM，再“啪”一下套上样式，形成肉眼可见的闪动（FOUC）。
-
@import无法被<link rel="preload">或 HTML 解析器预加载识别 - 嵌套多层
@import（如 A.css → @import B.css → @import C.css）会让延迟呈指数级放大 - 即便放在
<head>里的<style>@import "...";</style>，也绕不开上述阻塞逻辑
用<link>替代@import的实操要点
把所有 @import 拆出来，改写成 <link rel="stylesheet"> 标签，并按依赖顺序从上到下排列在 <head> 中——这是最直接有效的解法。
例如，原 CSS 文件中：
@import "reset.css"; @import "base.css"; @import "theme.css";应改为：
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="theme.css">
- 确保
href路径正确，且资源可被浏览器直接请求（避免 404 导致后续样式失效） - 不要加
media="print"等非关键媒体类型，除非真不希望它参与首屏渲染 - Webpack/Vite 构建项目中，检查
mini-css-extract-plugin或css.inline配置，确认未意外将 CSS 拆成异步 chunk
v-cloak 为什么在@import里失效
v-cloak 是 Vue 提供的指令，用于隐藏未编译完成的模板。但它起效的前提是对应样式（如 [v-cloak] { display: none; }）必须在 Vue 实例挂载前就已生效。而如果该规则写在 @import 加载的 CSS 文件里，它大概率还没下载完，Vue 就已开始渲染 DOM，v-cloak 自然失去作用。
立即学习“前端免费学习笔记（深入）”；
- 解决方案一：把
[v-cloak]规则写进由<link>引入的主样式表中 - 解决方案二：直接内联到
<head>里：<style>[v-cloak] { display: none; }</style> - 切勿依赖构建工具自动提取的 CSS 中的
v-cloak，尤其当它来自@import链路时
检查是否还有残留的@import陷阱
即使你手动改掉了 HTML 和主 CSS，第三方库、UI 组件包或 node_modules 里的 CSS 文件仍可能偷偷含 @import。这类问题往往在上线后才暴露。
- 打开 DevTools → Network → Filter
css，看各 CSS 文件的 Start Time 是否明显晚于 HTML 的DOMContentLoaded - 右键查看任意 CSS 文件响应体，搜索
@import字符串（注意大小写和引号格式：@import "x.css"/@import url(y.css)） - Vite 项目中运行
vite build --debug，观察打包产物中是否有@import未被消除 - Webpack 用户可配置
css-loader的importLoaders并启用url: false防止误处理
真正难缠的不是你自己写的 @import，而是你没意识到它藏在哪一层依赖里——每次引入新 UI 库前，都值得花 30 秒扫一眼它的 CSS 源码。
