根本原因是浏览器对blob:协议css资源施加解析限制：必须用加载，禁用@import或insertrule；若原始css含bom、csp未授权blob:、或存在document.domain设置，均会导致静默丢弃。
blob URL动态引入CSS时样式不生效
根本原因不是Blob本身构造失败，而是浏览器对blob:协议的CSS资源施加了额外限制：它必须被<link rel="stylesheet">加载，且不能通过@import或document.styleSheets.insertRule间接注入。一旦用fetch + createObjectURL生成URL后直接赋给link.href，看似流程完整，但实际可能卡在解析环节。
- 如果原始CSS字符串含BOM（如UTF-8 with BOM），Blob内容会被识别为非法起始字节，浏览器静默丢弃整个样式表，Network面板里看不到请求，Elements里也查不到该
<link>的规则 -
document.write或innerHTML插入含<style></style>标签的HTML片段时，即使内容是Blob URL，也不会触发CSS解析——浏览器只对静态<link>或<style></style>节点做样式引擎挂载 - 某些安全策略（如CSP）会显式禁止
blob:作为style-src的合法来源，此时控制台报Refused to load stylesheet from 'blob:...' because it violates the following Content Security Policy
new URL() + import.meta.url比blob更可靠
现代构建工具（Vite、Webpack 5+）已不推荐手动造Blob URL来加载CSS。真正能稳定工作的方案是让构建系统接管路径解析，再由浏览器原生处理：
- 用
import语句直接引入CSS文件（如import './theme.css'），由打包器自动注入<link>或<style></style>，无跨域/编码/权限问题 - 若需动态路径（比如主题切换），改用
const cssUrl = new URL('./themes/dark.css', import.meta.url).href，然后赋值给link.href——这个URL是真实文件路径，不是内存Blob，浏览器可正常发起HTTP请求并校验Content-Type - 避免在
if块或函数作用域内拼接路径字符串，如new URL(`./themes/${theme}.css`, import.meta.url)可行，但new URL(themePath, import.meta.url)中themePath为变量时，Vite无法静态分析，构建后路径失效
blob URL加载失败时Network面板看不到请求
这是最迷惑人的现象：代码执行无报错，link.href确实被设成了blob:https://xxx/abcd-efgh，但Styles面板空空如也，Network里也搜不到该URL。这不是加载失败，而是浏览器压根没发起网络请求——它把Blob当成本地内存资源，但CSS引擎拒绝解析非标准来源的Blob内容。
- 验证方法：在DevTools Console中执行
fetch('blob:https://xxx/abcd-efgh').then(r => r.text()).then(console.log)，若返回CSS文本，说明Blob内容完好；但<link>仍不生效，就是解析策略拦截 - 临时绕过：仅限调试，把Blob内容转成data URL（
data:text/css;base64,...），虽然体积膨胀且不可缓存，但浏览器对data URL的CSS解析无额外限制 - 生产环境务必放弃Blob方案，改用
import或new URL()，否则在Firefox或Safari上兼容性更差（它们对Blob CSS的支持比Chrome更保守）
CSP和document.domain会影响blob CSS加载
即使Blob URL格式正确、内容有效，以下两个隐藏条件仍会导致静默失败：
- 页面启用了严格CSP，且未在
style-src中显式加入blob:（注意末尾冒号不能少），浏览器会直接跳过解析，不报错也不渲染 - 页面执行过
document.domain = 'example.com'（常见于老式iframe跨域通信场景），此时所有Blob URL被视为不同源，CSS引擎拒绝应用其规则——哪怕URL本身是同协议同域 - 服务端返回的响应头含
X-Content-Type-Options: nosniff时，部分浏览器会拒绝将Blob内容当作text/css处理，即使你手动设置了link.type = 'text/css'也无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
