@use 在 Sass 中无法导入变量，但 @import 可以工作

Question

我在文件 _variables.scss 中声明了一个 sass 变量。当我使用 @use 导入该文件时，编译时出现错误，指出“错误：未定义的变量”。但是，如果我使用 @import 代替，一切都会编译得很好。

这是导入的第一个文件

//_variables.scss
$primaryColor: rgba(199, 26, 113, 0.747);

这是正在进行导入的文件。

//styles.scss
@use 'variables';

header {
background: $primaryColor;
}

编译时返回“错误：未定义的变量”。但如果我将 @use 更改为 @import，它就可以正常工作。

为什么@import 有效但@use 无效？

Answer 1

使用导入的变量@use 有一个命名空间。因此，您需要在变量名前添加命名空间（即，而不是$primaryColorwrite variables.$primaryColor）：

@use 'variables';
// @use './variables' // creates the same namespace

header {
  background: variables.$primaryColor;
}

@use 'variables' as 'renamedVariables';

header {
  background: renamedVariables.$primaryColor;
}

如果您不想使用名称空间，则可以加载没有名称空间的变量：

@use 'variables' as *;

header {
  background: $primaryColor;
}

但是 imo 命名空间使您的样式表更加整洁（例如，很清楚每个变量来自哪里，并且您不会意外地用另一个变量覆盖一个变量），所以我会坚持使用它们......

另一个堆栈溢出答案为我指明了正确的方向