@import可用于引入外部CSS文件，如Bootstrap或Google Fonts，但必须置于CSS最前，且影响性能；推荐使用<link>标签替代以提升加载速度。
在CSS中使用 @import 可以将外部样式表引入当前的CSS文件中，常用于加载第三方CSS框架或字体资源。虽然现代前端开发更推荐使用构建工具（如Webpack、Vite）或 <link> 标签来管理样式依赖，但 @import 依然有其适用场景。
基本语法
@import "url"; @import url("url"); @import url('url');其中 url 可以是绝对路径或相对路径。例如：
@import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css";-
@import "styles/reset.css";（相对路径）
引入在线CSS框架示例
你可以通过 @import 引入流行的CSS库，比如 Bootstrap、Tailwind CSS 或 Google Fonts：
- 引入 Bootstrap：
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"); - 引入 Google Fonts：
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
注意事项与限制
@import 必须写在CSS文件的最前面，任何其他规则之前，否则无效。
立即学习“前端免费学习笔记（深入）”；
- 性能影响：@import 是串行加载，会阻塞页面渲染，导致样式加载变慢。
- 浏览器兼容性良好，但在大型项目中不推荐使用。
- 如果使用多个 @import，每个都会发起一次HTTP请求，影响加载速度。
替代方案建议
对于生产环境，建议使用HTML中的 <link> 标签引入外部样式，以提升性能和可维护性：
这种方式并行加载，不会阻塞主样式表，更适合实际项目。
基本上就这些。@import 适合简单项目或调试用途，正式开发建议选择更高效的资源引入方式。
