从LibSass迁移到DartSass后，@use引发变量未定义问题求助

问题根源 #

LibSass的@import会将变量注入全局作用域，站点配置的变量能被共享SCSS文件直接读取；但DartSass的@use采用模块隔离作用域，每个模块的变量仅在自身内部生效，不会自动传递给其他模块，这就是$bgc提示“undefined variable”的原因。

解决方案（保留原有结构） #

通过!default定义默认变量 + @use ... with传递变量的方式，即可实现原有@import的覆盖逻辑：

1. 修改共享SCSS文件，添加默认变量 #

在scss/import.scss开头为需要被覆盖的变量添加!default声明，站点配置的变量会优先生效，无配置时使用默认值：

// scss/import.scss
$bgc: #ffffff !default; // 定义默认背景色

body {
  background-color: $bgc;
}

2. 调整站点导入逻辑，传递配置变量 #

修改site1/scss/import.scss，先导入站点配置模块，再通过@use ... with将配置变量传递给共享SCSS模块：

// site1/scss/import.scss
// 导入站点配置模块
@use "settings/config" as config;
// 将配置变量传递给共享模块
@use "../../scss/import.scss" with (
  $bgc: config.$bgc
);

3. 多变量场景优化 #

如果站点配置有多个变量，可采用更贴近原有@import习惯的写法：

// site1/scss/settings/_config.scss
// 直接声明要覆盖的变量（需与共享模块变量名一致）
$bgc: red;
$text-color: #333;

// site1/scss/import.scss
// 先导入共享模块，让默认变量进入当前作用域
@use "../../scss/import.scss" as *;
// 导入配置模块，覆盖已有的默认变量
@use "settings/config" as *;

验证效果 #

重新编译SCSS后，body的背景色会正确显示为站点配置的red，同时完整保留了“共享SCSS目录+站点独立配置”的原有结构。

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