@import路径必须相对于写该语句的css文件所在目录，且须置于文件最前；若路径错误或content-type非text/css会导致404或样式不生效，建议改用或构建时内联。
检查 @import 语句的路径是否为相对路径且基于被导入文件位置
@import 的路径解析起点不是 HTML 文件，也不是 CSS 入口文件，而是**写这行 @import 的那个 .css 文件所在目录**。很多人误以为它相对于 HTML 中 <link> 引入的主 CSS 文件，结果路径始终 404。
- 如果
main.css在/static/css/main.css，它写了@import "utils/vars.css";，那浏览器实际请求的是/static/css/utils/vars.css - 若
vars.css实际在/static/css/base/vars.css，就得写成@import "base/vars.css"; - 不支持
../向上跳转？其实是支持的，但必须确保路径逻辑正确——比如@import "../fonts/icon.css";表示从当前 CSS 所在目录向上一层，再进fonts/
确认服务器是否返回 404 或 MIME 类型错误
打开浏览器开发者工具 → Network 标签页 → 筛选 css，找到被 @import 请求的资源，看状态码和响应头。
- 状态码是
404？说明路径错或文件没部署到位 - 状态码是
200但样式没生效？检查响应头中Content-Type是否为text/css；如果是text/plain或空，某些浏览器（尤其旧版 Safari）会直接忽略导入 - 用 curl 验证：
curl -I http://localhost:8000/static/css/utils/vars.css
看Content-Type输出
注意 @import 的语法与加载限制
@import 必须出现在 CSS 文件最前面（仅允许在它之前有 @charset 或注释），否则整个语句会被浏览器忽略——连报错都不会有。
- 下面这种写法无效：
/* 注释 */ body { margin: 0; } @import "reset.css"; /* ❌ 被忽略 */ - 正确写法：
@import "reset.css"; /* 注释 */ body { margin: 0; } - 多个
@import会串行加载，阻塞后续 CSS 解析，可能导致 FOUC（Flash of Unstyled Content），这不是“失败”，但容易被误判为未生效
替代方案：优先用 <link> 而非 @import
现代项目中，@import 已基本被弃用。它无法并行加载、不支持媒体查询条件（除非整条语句带 media）、构建工具（如 Webpack/Vite）对它的静态分析也较弱。
立即学习“前端免费学习笔记（深入）”；
- HTML 中显式引入更可控：
<link rel="stylesheet" href="/static/css/reset.css"> <link rel="stylesheet" href="/static/css/main.css">
- 构建时合并 CSS 更推荐用 PostCSS 插件（如
postcss-import），它在构建阶段就内联@import，输出单个 CSS 文件，彻底规避运行时路径问题 - 如果你正在调试一个遗留系统且必须用
@import，请先用浏览器 Network 面板确认每个导入 URL 是否真实可访问——这是最常被跳过的一步
路径层级和加载时机这两个点，漏查任何一个，都会让“明明文件存在却没生效”这个问题卡半天。
