Dart Sass 3.0.0重构：@import改@use后mixin提示未定义

问题根源 #

@use是模块级作用域的，你在styles.scss中导入fonts模块的成员，仅能让styles.scss本身访问这些成员；而base.scss作为独立模块，并没有导入fonts，因此找不到roboto mixin。这和@import的全局作用域逻辑完全不同，@use的设计核心就是要求依赖显式化。

解决方法 #

方法1：在base.scss中显式导入依赖模块 #

修改./base.scss，让模块自己声明需要的依赖：

@use './fonts' as *;

.body {
  @include roboto(700);
}

方法2：通过@forward统一导出共享模块（适合多模块复用场景） #

如果希望在styles.scss统一管理依赖，可通过@forward导出fonts的成员，再让base.scss从styles.scss导入：

1. 修改./styles.scss：

@forward './fonts'; // 导出fonts模块的所有成员
@use './base' as *;

2. 修改./base.scss：

@use './styles' as *;

.body {
  @include roboto(700);
}

注意事项 #

• 优先选择方法1，符合SCSS模块系统的设计原则：每个模块显式声明自身依赖，避免隐式全局依赖带来的维护问题。
• as *是将模块成员直接导入当前作用域，也可以使用命名空间（比如@use './fonts' as fonts;，调用时写@include fonts.roboto(700);），能有效避免命名冲突。

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