将SASS的@import改为@use后出现undefined variable报错如何解决

问题原因 #

Dart Sass 的 @use 规则和旧版 Ruby Sass 的 @import 核心差异是模块作用域隔离：

• 旧 @import 会将所有导入的变量、混入等内容挂载到全局作用域，后续导入的文件可以直接访问前置导入的所有全局内容
• 新 @use 每个模块的作用域完全独立，你在入口 style.scss 中导入的 _var.scss 变量，不会自动透传给后续导入的 _typography.scss 等子模块，因此子模块中访问$baseFontSize会报未定义错误。

解决步骤 #

1. 给依赖变量的子模块单独显式引入依赖
   在报错的 css/_typography.scss 文件最顶部，引入它依赖的变量模块：

// css/_typography.scss 开头新增
@use 'var' as *;

如果 _base.scss、_container.scss 等其他子模块也用到了 _var.scss 中的变量，同样需要在各自文件顶部添加上述引入（同目录下不需要加css/路径前缀）。
注：Dart Sass 同一个模块只会加载一次，多文件引入不会造成重复编译冗余，无需担心性能问题

2. （可选）全局变量自定义配置
   如果需要在入口处统一覆盖 _var.scss 中带!default标识的默认变量，可以在入口引入时通过with参数配置：

// style.scss 中修改变量引入逻辑
@use 'css/var' as * with (
  $baseFontSize: 14
);

3. 重启编译服务
   修改完成后重新执行 sass --watch .，编译报错即可消失。

注意事项 #

不要混用 @import 和 @use 规则，否则会出现作用域冲突、变量重复定义等不可预期的问题。

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