CSS中使用@import导入子级CSS方法

CSS中的@import看似简单，实则暗藏诸多易被忽视的陷阱：它必须严格置于文件最开头（仅允许@charset例外）、路径解析基于当前CSS文件而非HTML页面、会阻塞渲染导致白屏延长、媒体查询必须紧接url后不可换行或分号隔开——任何细微违规（如首行空格、错误相对路径、链式嵌套）都会导致静默失效，样式莫名丢失却无报错提示。掌握这些关键细节，才能避免调试时徒劳无功，真正用好这一古老却仍存在于现代开发中的导入机制。

@import 必须写在样式表最前面

如果 @import 前面有其他 CSS 规则（哪怕是一行注释、一个空行、或 @charset 之外的任何声明），浏览器会直接忽略它，不加载子样式表。这不是警告，是静默失效。

• ✅ 正确：文件开头第一行就是 @import url("base.css");
• ❌ 错误：顶部先写了 body { margin: 0; }，再写 @import
• ⚠️ 注意：@charset "UTF-8"; 是唯一允许出现在 @import 之前的语句，且必须紧贴首行

@import 的 url() 写法和路径容易出错

路径解析基于「当前 CSS 文件所在位置」，不是 HTML 页面位置。很多人误以为相对路径从 HTML 开始算，结果 404 却查不出原因。

• 假设 main.css 在 /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 会解析失败

@import 会阻塞渲染，比 慢得多

浏览器遇到 @import 时，会暂停当前样式表解析，发起网络请求，等子样式表下载并解析完才继续。而 是并行加载的。

• 页面有 3 个 @import 链式嵌套？那基本是串行加载，白屏时间明显拉长
• 现代项目里，除非是极小的变量文件（如 colors.css），否则优先用
• 构建工具（如 Webpack、Vite）打包时，@import 通常会被内联或转为 link，但开发时仍要留意原始行为

媒体查询条件写在 @import 后面才生效

@import 支持条件加载，但语法位置很关键：媒体查询必须紧跟在 url 后面，不能换行，也不能放在分号之后。

• ✅ 正确：@import url("print.css") print;
• ✅ 正确：@import url("mobile.css") (max-width: 768px);
• ❌ 错误：@import url("mobile.css"); (max-width: 768px); —— 后半段被当普通 CSS，无效
• ⚠️ 注意：条件只控制是否加载，不控制是否应用；加载后若匹配不到媒体环境，规则本身仍不会生效

实际项目中，@import 最常栽在顺序和路径上，而且问题往往不报错，只是样式没出来——这时候先盯住文件开头有没有空行、有没有 @charset 写错位置，比调半天控制台更有用。

理论要掌握，实操不能落！以上关于《CSS中使用@import导入子级CSS方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！