SCSS主题类内定义的变量无法被识别生效问题咨询

你遇到的是SCSS预编译变量和运行时主题切换的逻辑冲突问题，核心原因如下：

• $开头的是SCSS预编译变量，仅在代码编译阶段生效，作用域严格遵循SCSS嵌套规则：定义在.dark类内部的$变量，仅能在.dark的{}代码块内部调用，其他文件/其他作用域调用会因为找不到定义直接失效。
• 切换DOM类名是JS控制的运行时行为，此时SCSS变量已经在打包阶段被替换为固定色值，根本不会随着类名切换动态更新。

方案1：改用CSS原生变量（改造成本最低，推荐） #

CSS原生自定义属性本身支持运行时动态继承，完全匹配你切换类名改主题的需求：

1. 在_themes.scss中全局定义不同主题的CSS变量：

// 默认主题
:root {
  --bg-main: #ffffff;
  --text-primary: #333333;
  --key-bg: #e0e0e0;
  /* 其余主题变量统一定义 */
}
// 深色主题
.dark {
  --bg-main: #1a1a1a;
  --text-primary: #ffffff;
  --key-bg: #333333;
}
// 其余主题同理定义

2. 在style.scss中直接调用变量即可，不需要调整JS切换类名的逻辑：

.main {
  background-color: var(--bg-main);
  color: var(--text-primary);
}
.calc-key {
  background-color: var(--key-bg);
}

切换类名时所有调用CSS变量的样式会自动同步更新，不需要额外处理。

方案2：坚持使用SCSS变量的实现 #

如果必须使用SCSS变量，可以通过全局主题映射+遍历生成样式的方式实现：

1. 在_themes.scss中全局定义主题映射和工具方法：

// 全局定义所有主题的色值映射
$themes: (
  default: (
    bg-main: #fff,
    text-primary: #333,
    key-bg: #e0e0e0
  ),
  dark: (
    bg-main: #1a1a1a,
    text-primary: #fff,
    key-bg: #333
  )
);
// 主题遍历mixin
@mixin theme() {
  @each $theme-name, $theme-map in $themes {
    .#{$theme-name} & {
      @content;
    }
  }
}
// 取主题色值方法
@function get-theme-value($key, $theme-map) {
  @return map-get($theme-map, $key);
}

2. 在style.scss中导入主题文件后调用mixin生成样式：

@import './themes';

.main {
  @include theme() using ($theme-map) {
    background-color: get-theme-value('bg-main', $theme-map);
    color: get-theme-value('text-primary', $theme-map);
  }
}
.calc-key {
  @include theme() using ($theme-map) {
    background-color: get-theme-value('key-bg', $theme-map);
  }
}

该方案编译后会自动生成每个主题对应的全量样式，也可实现切换效果，缺点是生成的CSS体积比CSS变量方案更大。

• 确认style.scss顶部已经正确导入_themes.scss，同目录下导入写法为@import './themes';，注意路径不要写错
• 不要把SCSS变量的定义和调用拆分到不同的嵌套作用域中，SCSS编译阶段不会跨作用域检索变量

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