@import会强制串行加载并阻塞渲染，因其是css语法而非html级声明，浏览器须先下载解析完当前css才能识别@import并发起下个请求，导致关键样式延迟300–800ms且预加载器不可见。

为什么@import会强制串行加载并阻塞渲染

@import不是HTML级资源声明，而是CSS语法的一部分，浏览器必须先下载、完整解析当前CSS文件（或

两者功能一致，但加载时机和作用域规则不同：

• 放在外部CSS文件中（如main.css）：@import受该文件自身加载顺序影响；若main.css本身靠<link>引入，则被导入资源必须排队等它下载完才发起请求
• 放在HTML的<style></style>标签内：属于内联样式块的一部分，解析到那一行才开始fetch，且无法利用HTTP缓存复用（除非响应头明确支持）
• 两者都不支持as="style"或fetchpriority等现代资源提示属性

无论在哪，@import都绕不开语义阻塞——它不是传输层问题，是浏览器渲染模型决定的硬性限制。

最容易被忽略的白屏诱因

即使你把关键CSS内联了，如果外链CSS返回的Content-Type是text/plain而不是text/css，浏览器照样拒绝解析，FOUC照闪。另外，@import路径解析以当前CSS文件为基准，不是HTML页面位置——比如base.css在/static/css/base.css，其中@import "reset.css"会请求/static/css/reset.css，路径错配会导致404静默失败，样式全丢。

构建产物里残留未展开的@import（尤其来自第三方库或PostCSS配置疏漏）会直接暴露开发期路径，还多一次请求数——这种问题在CI里靠grep -r "@import" src/ --include="*.css"就能捕获，但多数人根本没加这道检查。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！