Nginx 不解析 @import，其路径由浏览器按 CSS 文件 URL 相对解析；需确保路径正确、Nginx location 覆盖且文件存在，推荐用 root + 绝对路径避免歧义。
在 Nginx 中，@import 本身不会被 Nginx 解析或处理——它完全由浏览器在客户端解析和加载。Nginx 只负责按请求路径返回对应的 CSS 文件内容。因此，“CSS 中 @import 路径无法生效”的问题，本质是路径书写方式与 Nginx 静态文件服务机制不匹配导致的 404 或跨域加载失败。
确保 @import 路径可被浏览器正确请求
@import 的路径是相对于当前 CSS 文件所在 URL 地址（不是文件系统路径）解析的。例如：
- 若主 CSS 通过
/static/css/main.css加载，其中写@import "theme.css";，浏览器会请求/static/css/theme.css； - 若写
@import "/css/theme.css";（以/开头），则从站点根路径请求/css/theme.css； - 若写
@import "https://cdn.example.com/theme.css";，则直接发起跨域请求。
你需要检查浏览器开发者工具的 Network 面板，确认 @import 触发的请求 URL 是否正确、状态码是否为 200，并比对该 URL 是否能被 Nginx 的 location 规则覆盖。
检查 Nginx 静态资源 location 配置是否覆盖 import 资源路径
Nginx 不会自动“递归”查找或重写 @import 中的路径。你必须确保目标 CSS 文件实际存在于磁盘上，且其访问路径被 Nginx 正确映射。常见配置示例：
location /static/ {
alias /var/www/myapp/static/;
expires 1h;
}
此时：
– 请求 /static/css/main.css → 对应磁盘 /var/www/myapp/static/css/main.css
– 若 main.css 中含 @import "colors.css"; → 浏览器请求 /static/css/colors.css → 应存在 /var/www/myapp/static/css/colors.css
⚠️ 注意：alias 末尾斜杠需与 location 严格匹配，否则路径拼接出错；用 root 则行为不同（推荐优先用 root 避免歧义）。
避免相对路径陷阱：建议使用 root + 绝对路径导入
相对路径易受 HTML 引入位置影响（比如 CSS 被多个不同路径的 HTML 引用），更稳妥的做法是：
- 统一用以
/开头的绝对路径，如@import "/css/theme.css";； - 在 Nginx 中配置对应
location /css/ { root /var/www/myapp; }； - 确保文件真实路径为
/var/www/myapp/css/theme.css。
这样路径语义清晰，不依赖引用上下文，也便于 Nginx 定位。
调试技巧：快速验证 import 是否生效
可在浏览器控制台手动执行加载测试：
// 模拟 import 行为，看是否 404
fetch('/static/css/_partial.css').then(r => r.text()).then(console.log)
或临时将 @import 替换为 标签引入同一文件，对比是否正常——若 link 可用而 import 不行，基本可断定是路径书写或 MIME 类型问题（Nginx 需返回 Content-Type: text/css，默认通常已支持）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
