@import拖慢响应式加载速度，因其强制串行加载且无法参与浏览器预加载机制；而<link>支持media属性实现真正的条件加载与并行请求。
为什么 @import 会拖慢响应式加载速度
@import 不是“慢一点”，而是根本无法参与浏览器的预加载机制——它必须等前一个 CSS 文件下载完、解析到那一行，才发起下一个请求。比如 main.css 里写了 @import "theme-dark.css"，那 theme-dark.css 的请求就卡在 main.css 解析完成之后，哪怕网络空闲也干等。响应式场景下常靠 media 切换样式（如 @import "print.css" print），但 @import 的 media 只是语法糖，浏览器仍会下载它，无法真正延迟或跳过。
link 标签怎么实现真正的响应式加载
把 @import url("print.css") print 换成 <link rel="stylesheet" href="print.css" media="print">，浏览器就能识别：这玩意儿不参与首屏渲染，不用阻塞 HTML 解析，甚至可能根本不下载（某些浏览器对非匹配 media 值的样式表会跳过请求）。
-
media="print"、media="(prefers-color-scheme: dark)"、media="(max-width: 768px)"这些值，<link>能原生支持，@import 不能 - 多个带不同
media的<link>仍可并行发起请求，互不干扰 - JS 动态切换时，可以直接
link.media = "(prefers-color-scheme: light)"控制生效时机
@import 改成 link 后，CSS 变量和字体声明还生效吗
只要顺序没乱，就完全没问题。CSS 变量（:root { --color-primary: #007bff; }）和 @font-face 是全局注册的，跟在哪一个 <link> 里定义无关——但前提是定义它的那个文件，必须在使用它的文件之前加载。
- 错误顺序：
<link href="main.css">在<link href="vars.css">前面 →main.css里用var(--color-primary)会回退到初始值 - 正确顺序：
<link href="vars.css">→<link href="reset.css">→<link href="main.css"> -
@font-face同理：字体文件路径必须可访问，且定义所在 CSS 必须先加载，否则文字会先用 fallback 字体渲染
构建工具里还有 @import 怎么办
Webpack/Vite/Rollup 等现代构建工具默认会把 CSS 中的 @import 提取为独立 <link>，但前提是没关掉相关插件或配置了 css.experimental.importSupport: false 这类选项。
立即学习“前端免费学习笔记（深入）”；
- Vite 用户检查
vite.config.ts是否误启用了css.preprocessorOptions中禁用@import的选项 - Webpack 用户确认
css-loader版本 ≥ 6.0，且未设置importLoaders: 0 - 最稳妥做法：直接删掉源码里的
@import，改用 JS 侧import "./vars.css"，让构建工具统一处理
真正容易被忽略的是媒体查询的语义迁移——@import "foo.css" (min-width: 768px) 不能简单删掉 @import 留下 foo.css，必须显式补上 media 属性，否则它就变成无条件阻塞加载的主样式了。
