@use不在Sass中工作以导入变量，但@import正在工作

Question

我在文件_variables.css中声明了一个sass变量。当我使用@use导入该文件时，我在编译时出错，声明"错误：未定义变量"；。但是，如果我改为使用@import，那么一切都会编译得很好。

这是导入的第一个文件

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

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

//styles.scss
@use 'variables';
header {
background: $primaryColor;
}

当编译时，返回"0"；错误：未定义变量"；。但如果我把@use改为@import，它就可以正常工作了。

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

Answer 1

使用@use导入的变量有一个命名空间。因此，您需要在变量名前面加上名称空间(即写variables.$primaryColor而不是$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名称空间使您的样式表更整洁(例如，每个变量的来源都很清楚，您不会意外地用另一个变量覆盖一个变量(，所以我会坚持使用它们。。。

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

Answer 2

在sass中使用下划线_只意味着你在声明一个分部。当sass看到这些文件时，它不会将它们处理成CSS文件。

默认情况下，分部要求将其导入到另一个文件中，该文件将不可避免地被处理到CSS中，以便输出。而不是使用@use

Answer 3

试试这个。我在我的SASS文件夹中有一个名为"的目录；摘要"；。在那个文件夹里，我制作了一个index.scss文件。在索引文件中，我有以下

@forward "config";
@forward "variables";
@forward "named-colors";
@forward "hsl";
@forward "maps";
@forward "mixins";
@forward "reasonable-colors";

这些文件中的每一个都是部分"_变量"；在我想在其中使用所有这些变量和mixin的其余Sass文件中，我将其放在的顶部

@use '../abstracts' as *

这样所有的变量都可以使用。当然，您的文件夹结构可能有所不同。在抽象文件夹之后，我有基本文件、布局、模块、页面和主题的文件夹。每个文件夹中的每个文件都使用@use'/抽象为*