能，SCSS主题必须在编译时通过独立入口文件实现，每个主题对应一个SCSS入口（如theme-dark.scss），仅覆盖变量并引入通用模块，变量须统一定义在_variables.scss中并通过@use引入，禁止@import以防污染，Webpack需动态配置多entry输出独立CSS文件。
能，但必须在构建时完成，每个主题对应一个独立编译入口，不能靠运行时切换变量实现。
每个主题必须有独立的 SCSS 入口文件
SCSS 主题是编译时行为，@use + with 覆盖只对当前文件生效。如果你把所有主题逻辑塞进同一个 main.scss，那最终只会输出一份 CSS，变量覆盖会互相干扰。
- 新建
theme-light.scss、theme-dark.scss等文件，每个只做两件事：声明变量覆盖 + 引入通用样式模块 - 例如
theme-dark.scss内容必须是：@use 'variables' with ( $primary-color: #3b82f6, $bg-color: #1e293b, $text-color: #f1f5f9 ); @use 'components/button'; @use 'components/card';
- 入口文件里不能出现
@import或直接写变量赋值，否则破坏命名空间隔离
变量必须抽离到独立 _variables.scss 并用 @use
公共变量（颜色、间距、断点）必须统一定义在 _variables.scss 中，且所有主题文件都通过 @use 引入——不是 @import。
-
@import会让变量全局污染，theme-light.scss里的$primary-color可能被theme-dark.scss覆盖掉 -
@use 'variables' as *;是允许的，但更推荐显式@use 'variables' with (…)，避免意外覆盖 - 如果用了
@forward导出变量，记得加as *或as vars才能在下游使用
Webpack 需为每个主题生成独立 entry 和 CSS 输出
Webpack 默认只认一个入口，要生成多个 CSS 文件，就得让每个主题 SCSS 文件都成为独立 entry。
立即学习“前端免费学习笔记（深入）”；
- 在
webpack.config.js中用fs.readdirSync扫描themes/目录下所有.scss文件，动态生成entry对象 -
MiniCssExtractPlugin的filename设为[name].css，确保theme-dark.scss→theme-dark.css - 别漏掉
watch: true和watchOptions.ignored，否则改一个变量文件可能触发全部重编译
别把 CSS Custom Properties 和 SCSS 主题混在一起
看到 :root { --primary-color: #xxx } 就要警觉：这是运行时方案，和 SCSS 主题分发完全不兼容。
- SCSS 编译后输出的是静态 CSS，
var(--primary-color)在编译阶段无法解析，只能留空或报错 - 想用 CSS 变量实现运行时换肤？那就放弃 SCSS 主题，改用
data-theme+ JS 切换类名 +:root定义变量 - 两者可共存，但必须物理隔离：SCSS 负责生成基础样式骨架，CSS 变量只用于极少数需动态响应的属性（如动画色停顿点）
真正容易被忽略的点是：主题变量文件本身不能含任何样式规则，只能定义变量；所有样式必须写在 @use 引入的模块里，否则那些样式会被每个主题重复输出一遍。
