SCSS多主题需将变量抽至\_variables.scss并用@use引入，各主题通过with覆盖变量；样式模块调用变量而非硬编码；构建时须为每个主题单独编译输出隔离CSS文件。
SCSS变量提取到独立文件后，如何被多个主题包引用
必须把公共变量（如颜色、间距、断点）抽成 _variables.scss，再用 @use 或 @import 显式引入。注意：SCSS 6.0+ 推荐 @use，它会隔离命名空间，避免变量意外覆盖。
常见错误是直接在主题文件里写 $primary-color: #007bff，结果不同主题之间变量互相污染。正确做法是每个主题只覆盖自己关心的变量，并通过 @forward 或 @use + with 覆盖基础变量：
@use 'variables' with ( $primary-color: #2563eb, $font-size-base: 0.875rem );
-
@use必须放在文件顶部，且同一文件中不能混用@import和@use - 被
@forward的文件，其变量默认不可见，需加as *或显式as xxx才能使用 - 如果用
@import（旧项目），所有变量全局可访问，但无法做条件覆盖，维护性差
如何让一个CSS类同时适配多套主题变量
核心是把样式逻辑写在通用模块里，不硬编码颜色值，而是调用变量函数。例如写一个 .btn 类，它的背景色应来自 $primary-color，而不是写死 #007bff。
关键点在于：主题变量文件必须在编译前就完成注入，不能靠 JS 运行时切换 CSS 变量——那是另一套方案（CSS Custom Properties）。SCSS 主题分发是构建时行为，每次编译产出一份 CSS 文件。
- 每个主题对应一个入口 SCSS 文件（如
theme-dark.scss），里面只做变量覆盖 +@use组件模块 - 组件模块（如
_button.scss）里只能用color: $primary-color，不能用color: var(--primary) - 若想支持运行时切换，得用 CSS 变量 + JS 控制
data-theme，和 SCSS 主题分发是两条路，别混在一起
为什么编译后 CSS 没生效，或主题间样式串了
最常见原因是构建工具没为每个主题单独执行一次 SCSS 编译，或者输出路径没隔离。比如 Webpack 的 sass-loader 默认只处理一个入口，不会自动遍历所有 theme-*.scss。
检查点：
- 是否为每个主题配置了独立的
entry？例如 Webpack 中：theme-light: './src/themes/theme-light.scss' - 输出 CSS 文件名是否带主题标识？否则后一次编译会覆盖前一次，导致只有最后一个主题生效
- 是否误把变量文件当普通样式
@import到 HTML 中？SCSS 文件不能直接被浏览器加载 - VS Code 插件或 IDE 自动编译可能只监听主入口，漏掉新增的主题文件，需手动触发编译或重启监听
能否用 JS 动态加载不同主题的 CSS 文件
可以，但和 SCSS 变量分发无关。这是纯前端资源加载问题。编译好的各主题 CSS（如 theme-dark.css、theme-light.css）是完全独立的静态文件，JS 可以用 link 标签动态插入或替换。
注意两个边界：
- 不要试图用 JS 去“修改”已编译的 SCSS 变量——它们早已消失，只剩普通 CSS 规则
- 如果页面初始加载了
theme-light.css，后续换主题时，要先移除旧link，再插入新link，否则样式会叠加冲突 - 服务端渲染（SSR）场景下，需确保首次 HTML 返回时已注入正确的主题 CSS，否则有闪屏
真正容易被忽略的是：主题切换后，CSS 优先级可能因加载顺序变化而错乱；建议给每个主题 CSS 的选择器加上统一前缀（如 [data-theme="dark"] .btn），或用 !important 控制（不推荐），或确保每次只加载一份主题 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
