动态加载租户专属CSS需用document.createElement('link')创建节点，按tenantId等标识拼URL并插入head，确保在body渲染前完成；禁用打包工具CSS合并，保持文件独立；监听onerror降级，并注意样式隔离。
如何用 JavaScript 动态加载租户专属 CSS 文件
核心是通过 document.createElement('link') 创建样式表节点，再根据租户标识拼出对应 URL 插入 DOM。不能靠 CSS 变量或 class 切换“皮肤”，因为不同租户的皮肤可能涉及重置全局样式、字体、颜色系统甚至布局断点，必须加载独立 CSS 文件。
- 租户标识通常来自登录后返回的
tenantId、URL 路径（如/t/abc123/）或子域名（如abc123.example.com），优先从可靠上下文取，别依赖 localStorage 里可能过期的值 - 加载时机很重要：必须在
渲染前完成，否则页面会先闪默认样式；推荐在 HTML 的内、其他 CSS 之后立即执行脚本，或用document.head.appendChild(link)同步插入 - 务必加
rel="stylesheet"和type="text/css"，否则部分老浏览器（IE11）不识别；media="all"可显式声明，避免被误判为 print 样式
为什么不能用 静态写死在 HTML 里
静态写死意味着所有租户都加载全部皮肤 CSS，造成冗余请求、缓存污染、首屏阻塞。更严重的是，多个 link 并存时，后加载的 CSS 规则会覆盖前面的——但租户皮肤不是简单叠加，而是互斥替换，比如 tenant-a.css 里重写了 button 的 background，而 tenant-b.css 重写了 border-radius，两者同时生效会导致不可控样式冲突。
- 构建时无法预知运行时租户，静态 link 必须配合服务端渲染（SSR）注入，增加部署复杂度
- CDN 缓存策略难统一：不同租户的 CSS 应该各自独立缓存，但静态 link 的 URL 若不含租户标识（如
/css/skin.css），CDN 会把 A 租户的 CSS 缓存后返回给 B 租户 - 错误示例：
<link rel="stylesheet" href="/css/skin.css">—— 这个路径没带租户信息，必然错
动态加载失败时怎么降级和调试
CSS 加载失败不会抛 JS 异常，但会触发 link.onerror，这是唯一可靠的失败捕获点。不监听它，就等于对白屏、错色毫无感知。
- 必须绑定
onerror回调，里面至少做两件事：记录错误（含tenantId和 URL）、触发 fallback（比如加载一个极简的兜底 CSS 或提示用户刷新） - 常见失败原因：路径拼错（
/css/tenant-${id}.css写成/css/tenant-${id}/style.css）、租户 ID 含特殊字符未编码（如tenantId = "a/b"导致 URL 斜杠被解析为路径分隔）、CORS 阻止跨域请求（如果 CSS 放在独立 CDN 域名下，需确认响应头含Access-Control-Allow-Origin） - 调试技巧：在控制台手动执行
fetch('/css/tenant-abc123.css').then(r => r.text()).then(console.log)，直接看 HTTP 状态码和响应体，比等页面渲染再猜快得多
Webpack/Vite 构建时如何避免 CSS 被自动提取合并
现代打包工具默认把所有 CSS 提取到一个 main.css，这会把所有租户样式混在一起，彻底破坏动态加载逻辑。必须关掉这个行为，让租户 CSS 保持独立文件。
立即学习“前端免费学习笔记（深入）”；
- Vite 中，在
vite.config.ts里设置build.rollupOptions.output.manualChunks，按文件路径匹配租户 CSS（如/src/skins/.*\.css/），并确保build.cssCodeSplit: false关闭 CSS 拆分（否则仍可能被拆进 chunks） - Webpack 中，禁用
MiniCssExtractPlugin对租户目录的处理，改用require.context动态引入，或把租户 CSS 放在public/下绕过打包（推荐，省心且 URL 确定） - 关键检查点：构建产物目录里，必须能看到类似
dist/css/tenant-abc123.css这样的独立文件，而不是全被塞进dist/assets/index.xxxx.css
租户皮肤最麻烦的不是加载，而是样式隔离边界——比如一个租户的 h1 { color: red; } 不该影响另一个租户的 h1，但纯 CSS 没有作用域。所以动态加载只是第一步，后面还得靠 CSS Modules、Shadow DOM 或 scoped 样式约定来收尾，这点容易被忽略。
