现代 css 工程中不推荐使用 @import，因其阻塞渲染、无法并行加载、不支持条件加载，且构建工具默认不处理外部 url；应改用 link 标签或 js 模块 import 引入第三方 css。
@import 在现代 CSS 工程中基本不推荐用
它会阻塞渲染、无法并行加载、不支持条件加载，且构建工具（如 webpack、Vite）默认不处理 @import 外部 URL。你看到的“能用”，往往只是浏览器勉强兜底，不是工程实践该走的路。
真正可控、可维护的方式是把第三方 CSS 当作资源引入构建流程，而不是靠 CSS 语法去拉。
-
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css")：浏览器会等这个请求完成才继续解析后续 CSS，白屏风险明显 - 构建工具对
@import本地文件（如@import "./vars.css"）可能支持，但对外部 URL 几乎无视——打包时不会下载、不会哈希、不会 Tree-shake - CDN 域名不同还可能触发 CORS，尤其在开发服务器代理未配好时，控制台直接报
Cross-Origin Request Blocked
应该用 link 标签或构建时 import
第三方库的 CSS 文件本质是静态资源，交给 HTML 或 JS 模块系统来管理更可靠。
- 在
index.html中用<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.9.0/styles/github-dark.min.css">：简单直接，CDN 缓存友好，且不阻塞 JS 执行 - Vite 项目中可在
main.ts或入口 CSS 里写import 'highlight.js/styles/github-dark.css'：路径由包管理器解析，支持别名、自动哈希、与 JS 同步加载 - Webpack 用户应配置
style-loader+css-loader，再通过import引入 node_modules 下的 CSS，避免@import穿透到输出 CSS 中
如果非要用 @import（比如旧项目迁移），必须满足三个条件
这不是推荐做法，而是“真要硬上”时的止损清单。
立即学习“前端免费学习笔记（深入）”；
- 只用于同域或明确允许跨域的 CDN（检查响应头是否有
access-Control-Allow-Origin: *） - 确保它不在关键渲染路径上：不要放在
<style></style>块顶部，更不要在里多个@import连环套娃 - 用
media属性做懒加载，例如@import url("print.css") print，让非匹配条件下浏览器跳过请求
postcss 插件（如 @import 替代方案）不是万能解药
像 postcss-import 确实能把 @import "./mixins.css" 内联进最终 CSS，但它只处理本地文件，对 @import url(...) 默认忽略，除非额外配 resolve 和 load 钩子——而这已超出 PostCSS 职责边界。
- 启用
postcss-import后，@import "bootstrap/dist/css/bootstrap.css"能工作，是因为路径被 Node 解析为node_modules/bootstrap/...，不是 HTTP 请求 - 若写成
@import url("https://...")，插件通常静默跳过，最终还是原样输出，交由浏览器执行，回到第一个副标题的问题 - 这类插件还会干扰 source map，调试时看到的行号可能指向合并前的源文件，而非实际生成位置
第三方库的 CSS 不是“贴上去就行”的样式补丁，它和 JS 一样有加载时机、作用域、版本依赖。最常被忽略的是：你以为加了一行 @import 就引入了组件样式，其实很可能漏掉了配套的字体、图标或 JS 初始化逻辑。