React项目懒加载SCSS主题时如何动态覆盖!default全局变量

你用@use with不生效的核心原因是SCSS模块的配置仅在第一次引入该模块时生效，如果有任意文件在你的亮色主题文件之前引入了variables.scss，后续再用@use with传参都会被忽略，另外如果依赖变量的样式没有在变量覆盖完成后再引入，编译时变量已经被替换为默认值，自然也看不到覆盖效果。

1. 调整SCSS文件结构 #

首先确保你的基础变量文件所有变量都加!default标记，这个你已经做对了，示例：

// styles/_variables.scss
$bgColor: black !default;
$textColor: white !default;
$primaryColor: #1677ff !default;
// 其余所有通用变量统一在此声明，全部加!default

然后创建两个独立的主题入口文件，主题文件必须作为所有依赖主题变量的样式的唯一入口：

// styles/dark-theme.scss
// 第一步：引入变量模块时直接覆盖默认值
@use './variables' with (
  $bgColor: black,
  $textColor: white,
  $primaryColor: #0b57d0
);
// 第二步：引入所有依赖这些变量的样式文件，包括全局样式、组件样式等
@use './global';
@use './components/button';
@use './components/card';
// 所有用到SCSS主题变量的样式都要在此处引入，禁止在业务组件中单独引入这些样式

亮色主题文件同理：

// styles/light-theme.scss
@use './variables' with (
  $bgColor: white,
  $textColor: #1a1a1a,
  $primaryColor: #1890ff
);
@use './global';
@use './components/button';
@use './components/card';

2. 配置构建工具拆分主题包 #

你需要把两个主题文件配置为独立的构建入口，确保编译后生成两个独立的CSS文件，不会被打包进主bundle，方便后续懒加载。
以Vite为例，配置vite.config.js新增入口：

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        dark: './src/styles/dark-theme.scss',
        light: './src/styles/light-theme.scss'
      }
    }
  }
})

如果是Webpack，配置多入口即可，保证两个主题编译后输出为单独的dark-theme.css和light-theme.css。

3. React中实现懒加载切换 #

切换主题时直接动态加载对应CSS文件插入页面即可，不需要修改任何组件代码，也不需要加类名判断：

const switchTheme = async (themeType) => {
  // 移除已有主题样式
  const existTheme = document.getElementById('theme-css');
  if (existTheme) existTheme.remove();

  // 创建新样式标签
  const themeLink = document.createElement('link');
  themeLink.id = 'theme-css';
  themeLink.rel = 'stylesheet';
  themeLink.href = themeType === 'dark' ? '/dark-theme.css' : '/light-theme.css';
  
  document.head.appendChild(themeLink);
};

常见踩坑说明 #

• 绝对不能在业务组件中单独引入依赖主题变量的SCSS文件，否则组件样式会在编译时直接替换为默认变量值，主题覆盖不会生效
• 不要在多个文件中重复引入variables.scss，如果必须引入，确保第一次引入的位置就是主题文件中带with参数的引入
• 该方案所有变量替换都在编译阶段完成，运行时没有额外性能开销，组件中直接使用$bgColor这类统一变量即可，不需要做任何条件判断

内容的提问来源于stack exchange，提问作者ousmane784