@import 是双刃剑：必须位于 css 文件首行（@charset 除外），路径基于当前 css 文件位置，媒体查询须紧接 url 后，加载阻塞且容错率低，仅适合极少数场景。
@import 不是“能用就行”的语法糖，它是一把双刃剑：写对了能理清样式结构，写错了一行空格就让整个导入静默失效，且不报错。
必须放在 CSS 文件最开头，连空行都不能有
@import 只允许出现在 CSS 文件第一行（@charset 除外），前面哪怕多一个空格、一行注释、甚至 /* */ 块，浏览器都会直接忽略它——不是报错，是彻底不加载，样式消失还找不到原因。
- ✅ 正确：
@import url("base.css");（文件首行，无前置内容） - ✅ 允许：
@charset "UTF-8";紧贴首行，第二行才是@import - ❌ 错误：首行是空行，或先写了
body { margin: 0; }，再写@import - ⚠️ 注意：VS Code 或其他编辑器自动插入的 BOM 字节、隐藏 Unicode 字符也可能导致失效，建议用纯 ASCII 编码保存 CSS 文件
路径基于当前 CSS 文件位置，不是 HTML 页面
很多人调试时反复检查 HTML 路径却始终 404，问题出在路径解析逻辑上：@import 的相对路径，是从「当前 CSS 文件所在目录」开始算的，不是从 HTML 文件位置。
- 假设
/assets/css/main.css想引入同级的reset.css，应写@import url("reset.css");，不是@import url("../css/reset.css"); - 推荐用绝对路径避免歧义：
@import url("/assets/css/variables.css"); - 不建议省略
url()直接写字符串（如@import "a.css";），旧版 Safari 会解析失败
媒体查询必须紧接 url 后，不能换行或加分号
条件加载看似灵活，但语法容错率极低。媒体查询必须紧跟在 url(...) 后面，中间不能有换行、分号或空格隔开。
- ✅ 正确：
@import url("mobile.css") screen and (max-width: 768px); - ✅ 正确：
@import url("print.css") print; - ❌ 错误：
@import url("mobile.css"); screen and (max-width: 768px);（分号后的内容被当普通 CSS 解析，无效） - ⚠️ 注意：
supports(display: grid)也是合法条件，但仅 Chromium 和 Safari 支持，Firefox 当前不识别@import ... supports(...)
比 <link> 慢得多，别在主样式里滥用
@import 是串行阻塞加载：浏览器必须先下载并解析完当前 CSS 文件，遇到 @import 才发起下一个请求，等子文件下载+解析完，才继续往下解析——这会显著拉长白屏时间。
-
<link rel="stylesheet">是并行加载，性能优势明显 - 构建工具（如 Vite、Webpack）通常会把
@import内联进主 CSS，开发时看不出区别，但原始行为仍影响调试和热更新 - 真正适合
@import的场景极少：比如只导一个几行的colors.css变量文件；或者遗留项目无法改 HTML 结构时的临时方案
实际项目里，@import 最容易栽在开头那点空白和路径错位上，而且不出错提示。真要模块化，优先走构建流程或 CSS 层叠层（layer），而不是靠它撑结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
