正确写法是：rel必须为"stylesheet"，href用完整HTTPS URL且在<head>内，不自闭合；CDN失败时用onerror回退本地CSS，并加integrity和crossorigin。
直接换 CDN 链接不加回退，上线后样式白屏的风险极高——CDN 域名被拦截、路径写错、版本下线、响应 MIME 类型异常，任一环节出问题，用户看到的就是无样式的裸 HTML。
怎么写对 <link> 标签才不会静默失败
浏览器对 <link rel="stylesheet"> 的校验极严，错一个字符就拒绝加载，且不报明显错误。
-
rel必须是"stylesheet"（不是"style"、"css"，也不能漏引号） -
href必须是完整 HTTPS URL，不能是相对路径；file://协议下所有 CDN 都会失败 - 标签必须在
<head>内，塞进<body>可能触发 FOUC 或被 SSR 工具忽略 - 不要自闭合：
<link ... />在部分模板引擎中解析异常，写成<link></link>更稳妥
为什么 CDN 链接返回 text/plain MIME 错误
这不是 CDN 没生效，而是你请求的 URL 实际返回了 HTML 错误页（比如 404 页面），浏览器强行当 CSS 解析，于是报错 Refused to apply style from 'xxx' because its MIME type ('text/plain') is not a supported stylesheet MIME type。
- 直接在浏览器地址栏打开你的
href值，确认是否真返回 CSS 内容（Content-Type: text/css） - 检查 npm 包的
Files列表或 GitHub/dist目录结构，bootstrap@5路径是dist/css/bootstrap.min.css，少dist/就 404 - tailwindcss 官方不提供预编译 CSS 文件，
https://cdn.tailwindcss.com是 JS 初始化脚本，不能当href值用
如何给 <link> 加本地回退逻辑
靠 onerror 事件监听失败并插入本地 CSS 是最轻量、兼容性最好的方案，不需要额外构建或打包工具介入。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 先给
<link>加id，方便后续 JS 操作：<link id="bootstrap-cdn" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> - 在
<body>底部加一段内联 JS：<script>document.getElementById('bootstrap-cdn').onerror = () => { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = '/css/bootstrap.min.css'; document.head.appendChild(link); };</script> - 注意：CSS 文件路径必须是服务器可访问的真实路径，不能是
./css/...这类相对路径（尤其在 SPA 路由下易 404）
要不要加 integrity 和 crossorigin
生产环境必须加。没 integrity 的 CDN 就像没锁的保险柜——CDN 被劫持、镜像被污染时，你完全无法察觉。
-
integrity值需从 CDN 响应头Content-Security-Policy或官方文档获取，不能手算 - 必须配
crossorigin="anonymous"，否则浏览器会忽略integrity校验 - 示例：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous">
真正难的不是找到正确链接，而是把版本号、路径、MIME 类型、回退路径、SRI 哈希这五件事全部对齐——漏掉任意一个，都可能让线上页面在某个地区、某类网络环境下彻底失序。
