@import必须位于样式表最顶部，否则被忽略；仅推荐在CSS文件内用于模块拆分，页面级引入应使用link标签。
@import 必须写在样式表最顶部，否则会被浏览器忽略
在 标签内或外部 CSS 文件中使用 @import 时，它必须出现在所有其他规则（包括注释）之前。一旦前面有 body { }、/* 注释 */ 或空行，整条 @import 规则就会失效——浏览器不会报错，但样式也不会加载。
常见错误场景：
- 在
标签里先写了/* 全局重置 */，再写@import url("reset.css"); - 用构建工具生成 CSS 时，自动注入的 sourcemap 注释（如
/*# sourceMappingURL=... */）挡在了@import前面 - 多人协作时，有人误把
@import当成普通声明，插在选择器中间
@import 在
虽然语法上允许在 标签内写 @import，比如：
<style>
@import url("theme.css");
@import url("fonts.css");
body { margin: 0; }
</style>
但这样会导致关键 CSS 阻塞渲染：浏览器必须先下载并解析 theme.css 和 fonts.css，才能继续处理后续样式和 HTML 渲染。相比 ，@import 没有并行加载能力，且无法设置 media、as 或 crossorigin 等属性。
实际建议：
- 用
替代页面级导入 - 只在「CSS 文件内部」用
@import拆分模块（如将变量、混入、组件样式分离为多个文件） - 如果必须动态控制加载，改用 JS 的
fetch()+document.styleSheets注入，而非依赖@import
@import 支持 media 查询，但不能用 CSS 变量或表达式
@import 后可跟媒体条件，例如：
@import url("print.css") print;
@import url("mobile.css") (max-width: 768px);
注意几点：
- 媒体条件必须是静态的，不能含
var(--breakpoint)或calc() - 括号是必需的：
(min-width: 400px)✅，min-width: 400px❌ - 多个条件用
and连接，not和only也支持，但 IE8- 不支持only - 媒体类型不匹配时，该
@import仍会发起请求（只是不生效），可能造成无意义的网络开销
@import 的路径解析基于当前 CSS 文件位置，不是 HTML 页面
假设 HTML 在 /index.html，引用了 /css/main.css，而 main.css 里写了 @import "base/normalize.css";，那么浏览器实际请求的是 /css/base/normalize.css，不是 /base/normalize.css。
容易出错的情况：
- 开发时用 VS Code 实时预览 HTML，但 CSS 文件未部署到服务器，相对路径找不到资源（404）
- 构建后 CSS 被移到
/dist/css/bundle.css，但@import里的路径没随构建工具重写（需确认 PostCSS 或 Webpack 的css-loader是否启用url解析） - 用
file://协议打开 HTML，部分浏览器（如 Chrome）会因安全策略直接禁用@import加载本地 CSS
路径问题没有银弹，要么统一用绝对路径（@import "/css/vars.css";），要么确保构建流程能正确解析和重写 @import 中的相对路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
