使用@use导入外部SCSS文件后如何调用其中定义的变量值

你当前使用的是 Sass 官方主推的@use模块化导入规则，它和旧版@import的调用逻辑不同，默认会把导入的文件名作为命名空间，来调用文件内定义的变量、mixin、函数等资源。

你当前场景的正确写法如下：

color: typography.$text-dark;

如果需要调整调用方式，可以按需求修改导入规则：

• 自定义命名空间缩写，简化后续调用

  // 导入时指定别名，后续可通过 ty.$text-dark 调用变量
  @use "../../styles/typography" as ty;
  

• 取消命名空间，直接调用变量

  // 导入时指定别名为 *，后续可直接写 $text-dark 调用变量
  @use "../../styles/typography" as *;
  

注意：@use 规则必须写在样式文件的最顶部，不能出现在其他样式规则的后面，否则会触发编译错误。

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