因为 response.text() 获取的 CSS 字符串直接注入 style.textContent 会丢失路径上下文，导致 @import、url() 等相对路径以 HTML 页面 URL 为基准解析而失败；正确做法是用 response.arrayBuffer() + Blob + URL.createObjectURL() 创建具有正确 base URL 的 blob URL，再通过 <link> 加载。
为什么 fetch() 返回的 CSS 文本不能直接用 response.text() 后 innerHTML 注入？
因为 fetch() 默认不设置 Content-Type 响应头校验，但浏览器解析 CSS 时严格依赖 <style> 标签的文本内容是否被正确标记为 CSS。若你用 response.text() 拿到字符串再赋给 style.textContent，看似可行，但一旦 CSS 中含 @import、@font-face 或带相对路径的 url()（如 url(./icon.svg)），这些资源会以当前 HTML 页面 URL 为基准发起请求，而非 CSS 文件所在目录——这是最常被忽略的路径上下文丢失问题。
解决思路不是“注入文本”，而是“注入具有正确 base URL 的 <link> 或 <style> 节点”，并确保 CSS 内部资源能正确解析。
用 fetch() + Blob + URL.createObjectURL() 保持 CSS 资源路径有效性
这是目前兼容性好、路径行为最接近原生 <link rel="stylesheet"> 的做法：把响应体转为 Blob，再生成 blob URL，最后创建 <link> 标签加载它。这样浏览器会以该 blob URL 为基准解析所有相对 url() 和 @import。
-
fetch()必须用response.arrayBuffer()（不是text()）避免字符编码干扰，尤其含中文或特殊符号的 CSS -
Blob构造时必须显式传入{ type: 'text/css' }，否则某些浏览器可能拒绝解析 - blob URL 需在页面卸载前手动
URL.revokeObjectURL()，否则内存泄漏
fetch('/theme/dark.css')
.then(r => r.arrayBuffer())
.then(buf => {
const blob = new Blob([buf], { type: 'text/css' });
const url = URL.createObjectURL(blob);
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.append(link);
// 记录 url 供后续清理
window._dynamicCssUrl = url;
});
如果必须用 <style> 标签注入，怎么处理相对路径？
仅当 CSS 确认不含 @import、不依赖 url() 相对路径时才考虑此方案。否则务必走 blob URL 方案。
立即学习“前端免费学习笔记（深入）”；
- 用
response.text()可行，但需手动重写所有url(…)为绝对路径（例如把url(images/bg.png)替成url(/theme/images/bg.png)） - 正则替换要小心：匹配
url(后非括号内容，支持单/双引号和空格，推荐用/url\(\s*['"]?([^'")]+)['"]?\s*\)/g -
<style>标签需加data-href属性记录原始 CSS URL，便于后续调试或清理
fetch('/theme/light.css')
.then(r => r.text())
.then(css => {
const base = '/theme/';
const fixed = css.replace(/url\(\s*['"]?([^'")]+)['"]?\s*\)/g, (_, p1) => {
if (p1.startsWith('http') || p1.startsWith('//') || p1.startsWith('/')) return `url(${p1})`;
return `url(${base}${p1})`;
});
const style = document.createElement('style');
style.dataset.href = '/theme/light.css';
style.textContent = fixed;
document.head.append(style);
});
动态注入后如何安全卸载？
没清理机制的动态 CSS 是隐形内存和样式污染源。重点不是“删节点”，而是“删节点 + 清理关联资源”：
- 对 blob URL 方案：删除
<link>后，立即调用URL.revokeObjectURL(url)，否则 blob 仍驻留内存 - 对
<style>方案：只删节点不够，若 CSS 中有@font-face，字体不会自动卸载；需手动清空document.fonts（但不可靠，建议避免动态注入含字体的 CSS） - 推荐统一管理：用
Map存储url → { element, cleanup }，暴露unloadCss(url)方法
复杂点在于，CSS 加载是异步的，link.onload 或 style.sheet.cssRules 检查都可能失败；真正稳妥的做法，是接受“动态 CSS 一旦注入就尽量不卸载”，除非业务强要求主题切换——这时应预加载多套 CSS 并用 disabled 切换，而非反复增删。
