@import在响应式场景下特别伤首屏，因其media仅控制样式生效而不控制加载，浏览器仍会强制下载非匹配样式（如暗色主题css在亮色模式下也被请求）；而的media属性能真正实现“不匹配就不请求”，支持打印、暗色模式、断点等条件的物理隔离与延迟加载。
因为 @import 强制串行加载，且完全绕过浏览器预加载器——它不参与关键渲染路径的并行发现与请求，首屏样式可用时间被硬性推迟。
为什么 @import 在响应式场景下特别伤首屏
@import 的 media 参数只是 CSS 规则生效开关，不是资源加载开关。比如写 @import url("dark.css") (prefers-color-scheme: dark);，浏览器仍会在页面初始化阶段下载 dark.css，哪怕用户用的是亮色模式。
而响应式设计依赖的 media="(max-width: 768px)"、media="print" 这些条件，在 <link> 中才能真正触发“不匹配就不请求”或“匹配后延迟加载”。@import 下它们形同虚设。
- Network 面板里看到
Initiator列是stylesheet（而非parser），基本就是@import在链式触发 - 即使只有一层
@import，也会让首屏 CSSOM 构建卡在主 CSS 解析完成之后，白屏时间延长 200–400ms（实测中位值） - 嵌套两层时（如
main.css → theme.css → utils.css），瀑布延迟常达 600ms+，尤其在 HTTP/1.1 环境下更明显
怎么把 @import 的 media 移到 上才真正生效
不能只改语法，得重写资源声明位置和加载逻辑：
- 原写法：
@import url("print.css") print;→ 浏览器照下不误，首屏也拉 - 正确写法：
<link rel="stylesheet" href="print.css" media="print">→ 多数浏览器根本不会发请求，直到用户点打印 - 暗色主题同理：
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">，系统切换时才加载 - 想让某份 CSS 始终存在但不阻塞？用
media="(min-width: 0)"，浏览器识别为“非关键”，延迟加载且不锁渲染
注意：media="all" 或空 media 属性在 <link> 中反而危险——部分浏览器会误判为非关键资源，导致样式失效。
构建工具里的 @import 容易被误判为安全
Webpack/Vite 项目里看到 @import "./vars.css"; 不代表运行时有问题——如果配置了 css.extract 或使用了 postcss-import，它大概率已被内联或拆成独立 <link>。
真正要查的是最终产出的 dist/ 目录下的 CSS 文件：打开 main.css，如果里面还明文写着 @import，说明构建流程漏掉了这步处理，必须修正配置。
第三方 UI 库打包后的 CSS 也可能藏 @import，且无 sourcemap，这类最难排查——建议用 DevTools 的 Network → Initiator 链路逐层点开确认。
最麻烦的不是你写了 @import，而是它躲在你没权限改的 CDN CSS 里，且没有报错提示，只默默拖慢首屏。检测这事不能靠猜，得看 Initiator 和是否出现多层冒号路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
