SCSS升级用@use替代@import时变量未定义问题求助

问题根源 #

原来的@import会把变量全局注入，所以_common.scss能直接拿到主题文件里定义的变量，但@use是模块化导入，变量有作用域限制，而且只有当被导入文件里的变量用!default声明时，才能通过with语法覆盖。你之前的_common.scss没声明变量的默认值，所以with传参不生效，导致变量未定义错误。

修复步骤 #

1. 修改_common.scss，给依赖变量加!default声明
   把需要从主题文件传入的变量先声明并设置默认值（用null占位即可，确保能被后续传入的值覆盖）：

   // _common.scss
   $theme-light-background: null !default;
   
   .tena-panel {
     background: $theme-light-background;
   }
   

   如果有多个变量，依次添加即可：

   // _common.scss
   $theme-light-background: null !default;
   $theme-text-color: null !default;
   $theme-border-color: null !default;
   
   .tena-panel {
     background: $theme-light-background;
     color: $theme-text-color;
     border: 1px solid $theme-border-color;
   }
   

2. 在主题文件中用@use with传入变量
   主题文件里直接通过with把变量传给common，注意@use引用局部文件时可以省略下划线和.scss后缀：

   // blue-theme.scss
   @use 'common' with (
     $theme-light-background: #eaf2fb,
     $theme-text-color: #1976d2,
     $theme-border-color: #bbdefb
   );
   

编译结果 #

这样修改后，每个主题文件编译后会生成独立的CSS文件，比如blue-theme.css的输出和之前完全一致：

/* blue-theme.css */
.tena-panel {
  background: #eaf2fb;
  color: #1976d2;
  border: 1px solid #bbdefb;
}

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