SCSS主题按需打包的核心是分离编译入口，即每个主题对应独立SCSS入口文件（如themes/light.scss），构建时生成独立CSS chunk，避免全量打包。
SCSS主题按需打包的核心逻辑是“分离编译入口”
不是把所有主题变量塞进一个 _themes.scss 然后 @use 一次就完事——那样会导致 Webpack/Vite 把所有主题样式全打进主包。真正按需，得让每个主题有独立的 SCSS 入口文件，且构建工具能识别它们为不同 chunk。
关键在于：主题样式不能靠运行时条件判断（比如 @if $theme == 'dark'），而必须靠构建时的文件拆分。否则 Dart Sass 编译器会把所有分支都保留下来，最终 CSS 体积翻倍。
- 每个主题对应一个顶层入口文件，如
themes/light.scss、themes/dark.scss - 这些文件只做两件事：导入基础样式 + 设置当前主题的
:root变量 - 业务组件不直接引用主题变量，而是统一用
var(--primary-color)，确保样式与主题解耦
Webpack 中配置多主题 chunk 的关键点
如果你用的是 Webpack 5+，别碰 mini-css-extract-plugin 的 filename 静态写法。主题 CSS 必须动态生成 chunk 名，并确保不被合并进 main.css。
在 webpack.config.js 的 entry 字段里显式声明主题入口：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
entry: {
main: './src/index.ts',
'theme-light': './src/themes/light.scss',
'theme-dark': './src/themes/dark.scss',
'theme-blue': './src/themes/blue.scss'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css' // 注意 [name] 对应 entry key
})
]
};
这样打包后会生成 theme-light.abc123.css 这样的独立文件，切换时只需动态加载对应 link，不会拉取其他主题。
- 务必关闭
optimization.splitChunks对 CSS 的自动提取，否则 Webpack 可能把多个主题的公共样式又揉回一个 chunk - 如果用了
css-loader，确认importLoaders不会意外触发重复解析 - 主题入口文件里不要
@use 'base/variables'，而应@use 'base/variables' as *;或显式重命名，避免变量名冲突
Vite 下 theme 按需加载更轻量，但要注意 HMR 行为
Vite 默认不会为 .scss 文件生成单独 chunk，所以必须手动触发动态 import。不能写 import('./themes/dark.scss')——这会触发 JS chunk 而非纯 CSS。
正确做法是用 import.meta.glob 预扫描主题文件，再配合 link 标签注入：
const themeLinks = import.meta.glob('./themes/*.scss', { eager: false });
// 切换时：
async function loadTheme(name) {
await themeLinks[`./themes/${name}.scss`]();
document.documentElement.setAttribute('data-theme', name);
}
注意：eager: false 是关键，否则 Vite 会在启动时就把所有主题全编译一遍。
- Vite 的 HMR 对 SCSS 主题文件默认不生效——改了
dark.scss不会热更新，需手动刷新或加插件（如vite-plugin-css-vars） - 如果主题含大量
@import，Vite 的依赖追踪可能漏掉子文件，建议用@use替代 - 开发时可加个
console.log('Loaded theme:', name)验证是否真按需加载，而不是每次全量重编
SCSS 变量工厂模式 + CSS 自定义属性的边界在哪
用 SCSS 生成 :root { --color-primary: #409EFF; } 是对的，但别试图用 SCSS 函数动态计算运行时值。例如 theme-var('primary-color') 在编译后就消失了，它只是生成静态 CSS，不是运行时 API。
真正需要动态响应的场景（比如用户拖动色盘实时改主题），必须交由 JavaScript 控制 CSS 变量，SCSS 只负责提供初始值和结构模板。
- SCSS 的
@function和@mixin只在构建时执行，无法响应 localStorage 变化 - 如果主题包含复杂计算（如根据 base-color 自动生成暗色系 contrast 文字色），必须提前在 SCSS 里算好所有组合，生成完整变量集，而不是留到运行时
- 多品牌适配时，别用
@each循环生成全部品牌 CSS——按品牌拆成独立入口，否则一个品牌改了，所有品牌 CSS 都要重编译
最常被忽略的一点：主题 CSS 文件里写的 [data-theme="dark"] .btn 这类选择器，必须和 HTML 中实际的 data-theme 值严格一致，大小写、连字符都不能错。浏览器不会报错，但样式就是不生效——这种问题只能靠手动检查 HTML 属性和 CSS 选择器是否完全匹配。
