@import会拖慢首屏渲染，因其硬性阻塞主css解析、无法被html预加载扫描器识别，导致请求延迟发起，三层嵌套实测多出300–800ms首字节延迟。
为什么@import会拖慢首屏渲染
因为浏览器必须等主 CSS 文件下载完成、开始解析、读到 @import 那一行，才发起被导入文件的请求——这不是“慢一点”，是硬性阻塞。HTML 预加载扫描器根本看不到它，<link> 标签在解析 HTML 第一行就能并发拉资源，而 @import 连“被看见”都要排队。
实测三层嵌套 @import 比等价的三个 <link> 多出 300–800ms 首字节延迟，白屏时间直接受控于最深那一层的网络延迟。
为什么构建工具不帮你兜底
Webpack 和 Vite 默认不处理纯 .css 文件里的 @import：它们不会静态分析路径、不会自动提取依赖、也不会做缓存复用。尤其跨包时，相对路径极易 404；上线后 Network 面板里突然多出一堆未预期的额外请求，就是它在作祟。
常见误区：
- 误以为 SCSS 的
@import和原生 CSS 的@import是一回事（前者是编译期合并，后者是运行时请求） - 在
main.css里写@import url("legacy-theme.css")，结果这行才是真正在拖慢首屏的那一个 - 用
postcss-import同时启用了 css-loader，反而引发规则冲突
为什么媒体查询也救不了它
@import url("print.css") print; 看似只在打印时加载，但浏览器仍会在初始解析时下载该文件——除非你把它写进 @media print { } 块内部，但兼容性极差，IE 和部分旧版 Safari 会直接忽略。
更关键的是：<link rel="stylesheet" href="print.css" media="print"> 才是真正按条件加载的方案，且支持 preload、crossorigin、as 等现代控制能力，@import 全都不支持。
Vue / React 组件中用 @import 的副作用
在 Vue 的 <style scoped></style> 或 React 的 CSS Modules 中写 @import，样式依然全局生效——因为它不是把内容注入当前作用域，而是发起新请求，绕过了所有作用域隔离机制。
正确做法：
- 改用
<style src="./xxx.css" scoped></style>（Vue） - 或 JS 中
import './xxx.css'配合构建配置（Webpack/Vite） - 绝对不要在
.css文件里留@import，哪怕只有一行
最容易被忽略的一点：开发阶段本地服务器快、缓存强，@import 看不出问题；一上生产，CDN 缓存未命中 + 弱网 + 多层代理，性能断崖就来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
