@import强制串行加载，因其是css语法的一部分，需等主css下载解析后才发起请求；而在html解析阶段即被预加载器捕获，可并行下载。
为什么@import强制串行加载，而能并行
因为@import是 CSS 语法的一部分，浏览器必须等当前 CSS 文件下载完成、开始解析后，遇到那一行才发起下一个请求；而<link rel="stylesheet">在 HTML 解析第一阶段就被预加载器（preload scanner）捕获，多个请求可同时触发。
常见错误现象包括：Network 面板里 CSS 请求的 Initiator 显示为 stylesheet（说明是被 CSS 文件触发的），而非 parser；Lighthouse 报 “Eliminate render-blocking resources”；首屏白屏或 FOUC。
-
@import url("reset.css")出现在main.css开头 → 必须等main.css完整下载 + 解析完，才开始请求reset.css -
<link href="reset.css">和<link href="main.css">并列写在中 → 两者几乎同时发起请求 - HTTP/1.1 下更明显：单域名并发连接数通常为 6，
@import还会额外占用一个“隐式连接槽”，进一步挤占资源
media 属性在 @import 和 中的行为完全不同
@import url("print.css") print 看似只在打印时加载，实际浏览器仍会在页面初始化阶段下载它——因为它仍是 CSSOM 构建的阻塞资源；而 <link href="print.css" media="print"> 被浏览器识别为非关键资源，完全不参与渲染阻塞，且支持预解析。
可安全用于懒加载的 media 值包括：print、(prefers-color-scheme: dark)、(min-width: 768px)。这些能让浏览器跳过下载，直到条件匹配才拉取。
- 千万别给主样式表加
media="all"或空media，部分浏览器会误判为非关键资源，导致样式不生效 -
@import的media只控制规则是否“生效”，不控制是否“下载”；<link>的media才真正决定是否阻塞渲染 - 想让某份 CSS 完全不阻塞但又始终可用？用
media="(min-width: 0)"—— 浏览器识别为始终匹配，但不视为关键路径资源
构建工具里出现 @import，未必是真问题，但得看它在哪
Sass/Less 中的 @import 是编译期指令，Webpack/Vite 默认会把它内联进输出 CSS 或拆成独立 <link>，这类不产生运行时请求；但如果你在已打包好的 dist/main.css 里看到 @import，那就一定是配置出错了。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
常见配置疏漏点：
- Sass 用户关了
api: 'modern'，导致降级使用原生 CSS@import - Vite 项目在
css.preprocessorOptions.sass里禁用了import处理逻辑 - 用了
mini-css-extract-plugin却把样式打进了 JS bundle，结果运行时靠 JS 动态插入<style></style>并写入@import—— 这等于放弃所有预加载能力
替换 @import 为 时最容易忽略的顺序和作用域细节
把 @import "reset.css" 拿出来改成 <link href="reset.css"> 很简单，但顺序错一位，就可能让 :root 变量、@font-face 或 CSS 优先级失效。
实操要点：
- 依赖方必须放在被依赖方之后：
<link href="reset.css">→<link href="vars.css">→<link href="main.css"> - CSS 变量定义在
vars.css里，但main.css里直接用了color: var(--primary)—— 如果vars.css在main.css后面，变量就不可用 - 跨 CDN 的 CSS 要加
crossorigin="anonymous"，否则跨域错误静默失败，样式不加载也没提示
最麻烦的是调试体验变化：原来在 DevTools 里点一下就能跳转到 @import 行，换成多个 <link> 后，得手动比对 Network 请求顺序和样式生效位置 —— 这个细节没几个人提，但上线后卡半天找不到原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
