根本原因是@import会阻塞后续CSS解析与渲染，属CSS规范定义的同步行为；应改用构建工具模块化引入或link并行加载。
使用 @import 引入组件样式时出现延迟，根本原因是它会阻塞后续 CSS 的解析与渲染，尤其在链式导入或跨域场景下更明显。这不是 bug，而是 CSS 规范定义的同步加载行为——浏览器必须等 @import 的资源下载、解析完成，才会继续处理后面的样式规则。
避免在主样式表中用 @import 引入组件样式
这是最直接有效的解决方式。现代项目应优先使用构建工具（如 Webpack、Vite）的模块化能力，把组件样式作为独立 CSS 或 SCSS 模块 在 JS 中 import，或通过 <link rel="stylesheet"> 标签并行加载。
- ❌ 不要在
main.css里写@import './button.css'; - ✅ 改为在组件 JS 中写
import './Button.css';（配合 css-loader 或 Vite 自动处理） - ✅ 或在 HTML 中单独加
<link href="button.css" rel="stylesheet">，浏览器可并行下载
@import 的阻塞层级比你想象中更深
它不仅阻塞同文件后续样式，还会阻塞 同一层 import 链中的所有后续资源，包括字体、图片甚至其他 @import 的嵌套引入：
- 若
A.css中@import 'B.css';，而B.css又@import 'C.css';，则 C 必须等 B 下载完才开始请求 - 如果 B.css 文件本身较大或服务器响应慢，整个样式链都会卡住，页面可能出现 FOUC（无样式内容闪烁）
- 跨域
@import还会触发额外的 CORS 预检，进一步拉长延迟
真要用 @import？至少控制它的位置和范围
如果受限于旧架构不得不保留 @import，请严格限制其使用场景：
立即学习“前端免费学习笔记（深入）”；
- 只在 CSS 文件末尾引入非关键样式（如打印样式
@import 'print.css' print;） - 避免在
<style></style>标签内使用@import（它比外链 link 更晚执行，且无法利用浏览器预加载器） - 不要用
@import加载带动态路径的样式（如@import url('theme-' + $color + '.css');），Sass/Less 编译后也需确保输出是静态路径
基本上就这些。@import 的延迟不是网络问题，而是加载机制本身决定的——它天生不适合做组件化样式组织。换成构建时合并、运行时按需注入或原生 link 并行加载，体验立马改善。
