@import路径解析基于当前CSS文件位置而非HTML页面。1. 语法支持引号与url()写法；2. 路径相对当前CSS文件所在目录；3. 可用相对、绝对或远程路径；4. 需置于CSS顶部，影响性能，建议现代项目用构建工具替代。
在使用 @import 导入 CSS 文件时，路径的解析规则取决于当前 CSS 文件的位置，而不是 HTML 页面的位置。这一点非常重要，因为很多人误以为路径是相对于 HTML 文件的。
1. @import 基本语法
使用 @import 导入外部样式表的语法如下：@import "styles/other.css";
或@import url("styles/other.css");
2. 路径解析规则
@import 中的路径是相对于当前 CSS 文件所在目录的，不是相对于 HTML 文件。例如：
你的项目结构如下：
project/ ├── index.html ├── css/ │ ├── main.css │ └── theme/ │ └── dark.css └── images/
@import "theme/dark.css";
3. 使用绝对路径与相对路径
-
相对路径：相对于当前 CSS 文件位置。
如：@import "./utils/helpers.css"; -
绝对路径（根路径）：以 / 开头，表示从网站根目录开始。
如：@import "/css/reset.css";，适用于部署在服务器上的项目。 -
远程路径：导入网络资源。
如：@import "https://cdn.example.com/base.css";
4. 注意事项
@import 有一些使用限制和性能问题：- @import 必须写在 CSS 文件的最前面（位于其他规则之前）。
- 每个 @import 语句只能导入一个文件，多个需多次书写。
- 使用过多 @import 可能导致页面渲染变慢，因为它是串行加载的。
- 现代开发中更推荐使用构建工具（如 Webpack）或原生 CSS 模块来管理样式依赖。
基本上就这些。关键记住：路径是相对于当前 CSS 文件的，不是 HTML 页面。搞清这一点，基本不会出错。
