二级@import问题：如何实现CSS文件的嵌套导入？

嘿，这个问题我之前也踩过坑！核心原因是CSS原生的@import路径是相对于当前CSS文件的加载位置，而不是相对于导入它的父文件——也就是说，当你在main-page.css里导入compose.css后，浏览器会从main-page.css所在的目录去解析compose.css里的那些@import路径，而不是从compose.css的目录找，这就导致路径错误，嵌套的CSS文件加载失败了。

下面给你几个完全无hack的解决方法，按推荐程度排序：

1. 使用网站根目录绝对路径（最推荐） #

把compose.css里所有@import的路径都改成以/开头的绝对路径，这样不管哪个文件导入compose.css，浏览器都会从网站根目录开始查找资源，不会出错。

修改后的compose.css代码：

@import "/footer/footer.css";
@import "/header/header.css";
@import "/breadcrumbs/breadcrumbs.css";

这个方法最稳定，不管你的CSS文件结构怎么调整，只要文件在根目录下的对应位置，就能正确加载。

2. 调整相对路径以匹配父文件位置 #

如果不想用绝对路径，你需要把compose.css里的@import路径改成相对于main-page.css的位置。举个例子：

• 假设main-page.css在网站根目录
• compose.css在/css/compose.css
• header.css在/header/header.css

那compose.css里的路径就要改成：

@import "../footer/footer.css";
@import "../header/header.css";
@import "../breadcrumbs/breadcrumbs.css";

不过这个方法的缺点是，如果compose.css被其他不同位置的CSS文件导入，你就得重新调整路径，灵活性较差。

3. 使用CSS预处理器（优雅方案） #

如果你的项目允许引入Sass、Less这类预处理器，那它们的@import是在编译阶段处理的，不是浏览器运行时的动态导入。预处理器会把所有嵌套导入的CSS文件合并成一个最终的CSS文件，自然就不存在路径解析的问题了。

比如用Sass的话，你的compose.scss可以这样写：

@import "./footer/footer.scss";
@import "./header/header.scss";
@import "./breadcrumbs/breadcrumbs.scss";

然后在main-page.scss里导入compose.scss，编译后会生成包含所有样式的main-page.css，完全解决嵌套导入的问题。

额外提醒 #

别忘了CSS原生@import的规则：所有@import语句必须放在CSS文件的最顶部，不能在任何样式规则之后，否则浏览器会直接忽略这些导入语句哦！

内容的提问来源于stack exchange，提问作者Gleb Kalachev