SCSS迁移@forward/@use时已定义变量仍提示未定义？

核心原因 #

SCSS中，@media媒体查询属于局部作用域，在其内部定义的SCSS变量仅能在该媒体查询内部及嵌套子作用域中访问。而@forward只能导出模块顶级作用域的变量，媒体查询内的变量无法被暴露到模块的公共API中，因此其他模块通过@use导入后，自然会触发「Undefined variable」错误。

之前用@import能正常工作，是因为@import会将所有导入的代码合并到同一个全局作用域，媒体查询内的变量会被提升到全局（SCSS旧特性），但@use/@forward的模块化机制完全摒弃了这种全局污染的行为，严格遵循作用域规则。

可行解决方案 #

方案1：将变量声明移到媒体查询外部，内部仅做修改 #

把$color_m-dynamic系列变量在模块顶级作用域先声明（可设默认值），再在媒体查询内用!global关键字修改变量值，这样变量属于模块顶级作用域，可被@forward正常导出。

示例代码：

// abstract/_color.scss
// 顶级作用域声明变量，设置默认值
$color_m-dynamic-50: #ffffff !default;
$color_m-dynamic-100: #f9fafb !default;

// 媒体查询内修改全局变量
@media (prefers-color-scheme: dark) {
  $color_m-dynamic-50: #1f2937 !global;
  $color_m-dynamic-100: #374151 !global;
}

方案2：改用CSS自定义属性（推荐） #

既然是针对系统主题的动态颜色，直接用CSS原生变量代替SCSS变量更合适——CSS变量天生支持在媒体查询中动态切换，且不受SCSS作用域限制。

示例代码：

// abstract/_color.scss
:root {
  --color-dynamic-50: #ffffff;
  --color-dynamic-100: #f9fafb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-dynamic-50: #1f2937;
    --color-dynamic-100: #374151;
  }
}

在_button.scss中使用：

@use '../abstract';

.button {
  background-color: var(--color-dynamic-50);
  color: var(--color-dynamic-100);
}

方案3：用混合宏（@mixin）封装主题样式 #

如果必须保留SCSS变量的使用方式，可将媒体查询和变量相关样式封装成混合宏，在需要的组件中引入。

示例代码：

// abstract/_color.scss
@mixin dynamic-color-styles {
  @media (prefers-color-scheme: light) {
    $color_m-dynamic-50: #ffffff;
    $color_m-dynamic-100: #f9fafb;
    @content;
  }
  @media (prefers-color-scheme: dark) {
    $color_m-dynamic-50: #1f2937;
    $color_m-dynamic-100: #374151;
    @content;
  }
}

在_button.scss中使用：

@use '../abstract';

.button {
  @include abstract.dynamic-color-styles {
    background-color: $color_m-dynamic-50;
    color: $color_m-dynamic-100;
  }
}

关键注意事项 #

• @use/@forward是SCSS模块化的核心，严格遵循作用域规则，和@import的全局合并逻辑完全不同，迁移时必须抛弃旧的全局变量思维。
• 跨模块共享的SCSS变量必须定义在模块的顶级作用域，局部作用域（如媒体查询、嵌套选择器）内的变量无法被外部模块访问。

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