@import 不适合动态切换皮肤，因其在 css 解析时固化加载顺序、无法运行时替换或卸载，js 无法操作已导入的样式表，且阻塞渲染、不支持 media 动态生效；应改用 标签配合 js 控制 href 实现皮肤切换。
为什么 @import 不适合动态切换皮肤
它在 CSS 解析时就固化了加载顺序和依赖关系，无法运行时替换或卸载。浏览器一旦解析完 @import 规则，对应资源就被当作静态依赖处理，后续 JS 操作 DOM 或修改 <link> 无法影响已 @import 进来的样式表。
常见错误现象：document.styleSheets 里找不到 @import 引入的 CSSRule，或者用 JS 修改 link.href 后皮肤没变——因为真正起作用的是被 @import 进来的子文件，而它根本不在 DOM 中。
-
@import是 CSS 层面的导入，不是 HTML 层面的资源管理，JS 对它“不可见” - 多个
@import会阻塞渲染，且不支持media条件动态生效 - Webpack/Vite 等构建工具中，
@import通常被提前编译合并，失去运行时灵活性
该用什么代替 @import 实现皮肤切换
用 <link rel="stylesheet"> 标签 + JS 控制 href，是最直接、可预测的方式。
使用场景：用户点击“深色模式”按钮、系统偏好变更（prefers-color-scheme）、AB 测试分发不同皮肤。
立即学习“前端免费学习笔记（深入）”；
- 所有皮肤 CSS 文件保持独立，命名清晰，如
skin-light.css、skin-dark.css - HTML 中只保留一个带固定
id的<link>，例如：<link id="theme-link" rel="stylesheet" href="skin-light.css">
- 切换时只改
document.getElementById('theme-link').href，浏览器自动卸载旧样式、加载新样式 - 注意：不要用
appendChild反复加新<link>，会导致样式叠加、权重混乱
href 路径写法与缓存控制要点
路径不对或缓存策略不当，会导致皮肤切换后样式不更新，甚至 404。
参数差异体现在路径是否带版本号、是否走 CDN、是否启用 HTTP 缓存。
- 推荐用带哈希的文件名，如
skin-dark.a1b2c3.css，避免手动清缓存 - 避免相对路径陷阱：如果入口 HTML 在
/admin/下，而 CSS 放在/css/，href="css/skin-dark.css"才正确，href="skin-dark.css"会错配到/admin/skin-dark.css - 开发时可在
href后加时间戳强制刷新：skin-dark.css?t=1712345678，但上线前必须去掉 - 服务端应为 CSS 设置
Cache-Control: public, max-age=31536000（一年），靠文件名变化驱动更新
如何安全地触发皮肤切换并避免 FOUC
FOUC（Flash of Unstyled Content）不是必然发生，但发生在 DOM 渲染早于新 CSS 加载完成时——尤其网络慢或皮肤文件大时。
性能影响明显：用户看到默认样式闪一下，再跳成目标皮肤，体验断裂。
- 切换前给
或加临时 class，如theme-loading，CSS 中预先定义该 class 下的最小化占位样式（比如统一字体、基础间距） - 监听新
<link>的load事件，再移除theme-loading，确保样式就绪才解除限制 - 不要用
onerror简单 fallback，需记录错误并降级到默认皮肤，否则页面可能完全无样式 - 若皮肤含大量自定义属性（
--primary-color），建议在:root中预设一组基础值，防止变量未定义导致样式异常
button 的 border-radius，但另一个皮肤没覆盖，切换后按钮圆角就丢了——这和 @import 无关，但常被误认为是加载机制问题。 
