@import 必须位于 CSS 文件开头才有效，否则被浏览器静默忽略；它触发串行加载、路径相对自身文件、媒体查询语法严格受限。
为什么 @import 在 CSS 文件开头才有效
@import 是 CSS 的规则，不是 JS 那种可以随处写的语句。它必须出现在所有样式声明之前，否则浏览器直接忽略——连报错都不会有，静默失效。
- 放在
.css文件中间或末尾？@import被跳过，目标样式表压根不加载 - 写在
<style>标签里但前面有其他 CSS 规则？同样被忽略 - 想用
@import加载变量或 mixin？不行，CSS 本身不支持逻辑，它只做资源引入
@import 和 <link> 的实际加载差异
@import 是 CSS 层级的导入，浏览器会把它当成“当前样式表的一部分”，从而触发串行加载：先下载主文件，解析到 @import 行，再发起新请求。而 <link rel="stylesheet"> 是 HTML 层级的并行加载，多个 <link> 可以同时拉取。
- 一个
main.css里写了 3 个@import？相当于 1 → 2 → 3 的链式请求，首屏渲染明显变慢 - 换成 3 个独立
<link>？浏览器通常并行发起，总耗时更短 - 现代构建工具（如 Webpack、Vite）默认把
@import提前内联或转成<link>，不是因为它“错”，而是它天然不利于性能
路径问题：相对路径以谁为基准
@import 的路径是相对于**它所在 CSS 文件的位置**，不是 HTML 页面位置。这点和 <link> 完全不同，也是最容易出错的地方。
-
styles/base.css里写@import "reset.css";→ 加载styles/reset.css -
styles/base.css里写@import "../common/vars.css";→ 加载common/vars.css - 如果用构建工具处理，路径可能被重写；但纯静态服务下，404 错误往往就卡在这层相对关系上
媒体查询和条件加载的写法限制
@import 支持附加媒体查询，但语法很死板：必须紧接在 URL 后，不能换行，不能加空格干扰，也不能嵌套其他规则。
立即学习“前端免费学习笔记（深入）”；
- 正确：
@import "print.css" print;或@import "mobile.css" (max-width: 768px); - 错误：
@import "mobile.css" (max-width: 768px) { ... }（后面不能跟块） - 错误：
@import "mobile.css"; @media (max-width: 768px) { ... }（这不是条件导入，只是普通媒体查询） - 注意：这类条件导入仍会发起网络请求，只是匹配失败时不应用样式——资源已下载，白耗带宽
@import 规则看着简单，但它的加载时机、路径解析、媒体查询支持都和直觉有偏差。真要合并样式，优先走构建流程或 <link>；非要用 @import，就得盯紧位置、路径、网络链路这三处。 
