为何无法覆盖SCSS变量？React+SCSS Modules场景求助

我在button.module.scss文件顶部定义了SCSS变量：

$bgc-color: var(--color-daybreak-blue-6);

将其用于.primary类中可正常生效：

.primary {
  background-color: $bgc-color;
  color: $bgc-color;
}

但尝试通过媒体查询修改该变量值时却不生效：

@media (min-width: 600px) {
    $bgc-color: var(--color-red-1);
}

变量仍保持初始值，项目使用React、Sass及SCSS Modules，而普通CSS变量在媒体查询中可正常覆盖，请问问题出在哪里？

核心原因 #

SCSS变量和原生CSS变量的运行机制完全不同：

• SCSS变量是预编译阶段处理的，代码在编译成CSS时就已经确定了变量的最终值。媒体查询是浏览器运行时才会识别的规则，预编译过程不会解析媒体查询的上下文，所以你在媒体查询里修改SCSS变量，只会在这个局部作用域内生效，但该作用域中没有使用该变量的代码，编译后对外部的.primary类不会产生任何影响。
• 原生CSS变量（--xxx）是运行时生效的，浏览器会根据媒体查询的条件动态切换变量值，因此能正常实现覆盖效果。

解决办法 #

根据你的使用场景，有两种可行方案：

方案1：直接在媒体查询中覆盖目标类样式 #

既然SCSS变量预编译后无法动态改变，直接在媒体查询中修改.primary的属性：

@media (min-width: 600px) {
  .primary {
    background-color: var(--color-red-1);
    color: var(--color-red-1);
  }
}

方案2：改用原生CSS变量作为中间层 #

如果想通过变量统一管理样式，可以将SCSS变量替换为原生CSS变量，或者让SCSS变量指向原生变量，再在媒体查询中修改原生变量：

// 定义全局原生CSS变量
:root {
  --bgc-color: var(--color-daybreak-blue-6);
}

.primary {
  background-color: var(--bgc-color);
  color: var(--bgc-color);
}

// 媒体查询中修改原生变量
@media (min-width: 600px) {
  :root {
    --bgc-color: var(--color-red-1);
  }
}

如果使用SCSS Modules不想污染全局作用域，可以把原生变量定义在组件的根类中：

.button-container {
  --bgc-color: var(--color-daybreak-blue-6);
}

.primary {
  background-color: var(--bgc-color);
  color: var(--bgc-color);
}

@media (min-width: 600px) {
  .button-container {
    --bgc-color: var(--color-red-1);
  }
}

内容的提问来源于stack exchange，提问作者Mateusz Matuś Kowalski