Sass中@use导入变量报错，@import却正常，原因何在？

这俩指令的核心差异在于作用域机制：

• @import是老式的全局导入，它会把_variables.scss的内容直接合并到当前styles.scss里，变量变成全局可用，所以你直接写$primaryColor能正常读取。
• @use是Sass主推的模块化导入，它会给导入的文件创建独立的命名空间，默认用文件名（去掉下划线和后缀）作为命名空间。你现在直接用$primaryColor会报错，是因为变量被封装在variables这个命名空间里了，当前作用域找不到它。

解决方法： #

• 用命名空间访问变量：

  @use 'variables';
  .demo {
    color: variables.$primaryColor;
  }
  

• 自定义命名空间：

  @use 'variables' as v;
  .demo {
    color: v.$primaryColor;
  }
  

• 强制把变量导入到当前作用域（不推荐，违背模块化设计）：

  @use 'variables' as *;
  .demo {
    color: $primaryColor;
  }
  

Sass官方早已推荐用@use替代@import，后者会导致全局变量污染、重复编译等问题，模块化的写法更利于维护大型项目。

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