问@使用在Sass中不工作的方法导入变量，但@import正在工作

EN

使用下划线_ in sass仅仅意味着当Sass看到这些文件时，它将不会将它们处理为CSS文件。

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

尝尝这个。我的SASS文件夹中有一个名为“文摘”的目录。在该文件夹中，我创建一个index.scss文件。在该索引文件中，我有以下内容

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

这些文件中的每一个都是我的Sass文件中的一个部分"_variables“，我想使用所有这些变量和混合文件，我把它放在顶部

@use '../abstracts' as *

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

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

https://stackoverflow.com/a/63012314/4551707给我指明了正确的方向