在我的main.scss 文件中，我将以下两个部分与@use 一起使用：
@use 'variables' as v;
// @forward 'variables'; // doesn't work
@use 'layout';
在_layout.scss，我尝试使用这个变量：
h1 {
color: v.$mainHeaderColor;
}
但它给了我错误：
没有命名空间为“v”的模块。
颜色：v.$mainHeaderColor;
如何在我的 main.scss 中加载我的所有部分，以便每个部分都可以使用其他所有部分，这可以通过 @import 实现，即在 @use 命名空间之前。
【问题讨论】：
标签： sass
没有名称空间为“v”的模块。 - 颜色：v.$mainHeaderColor;
您在编译main.scss 时收到错误，因为_layout.scss 部分文件不知道命名空间“v”，并且无法从_variables.scss 模块加载像$mainHeaderColor 这样的成员。发生这种情况是因为 _layout.scss 没有 @use 规则从“变量”加载成员，因此它无法访问该模块中定义的变量。
“快速”解决方法是在您的 _layout.scss 文件中引入 @use 规则以从 _variables.scss 加载变量，如下所示：
@use "./variables" as v;
/* _layout.scss */
h1 {
color: v.$mainHeaderColor;
}
现在真的不需要在您当前的结构中使用@forward，因为它只有两个部分文件被加载到main.scss。如果您想使用@forward，我建议您进一步阅读并使用索引文件设置目录。
要更新您的主文件，这就是将带有@use at-rules 的文件加载到main.scss 中的样子：
@use 'variables' as v;
@use 'layout';
/* main.scss */
/* Use the loaded members from '_variables.scss' inside the main file */
.demo {
color: v.$mainHeadColor;
}
随着@import 规则逐渐退出Sass 的主要实现，(dart-sass)。现在是我们采用@use 规则并学习如何利用index files 和@forward 等酷炫功能以及为加载的模块设置自定义命名空间的时候了。
由于@import at-rules 使所有内容都可以在全球范围内访问，这就是我看到使用@use 的大部分困惑发挥作用的地方。如果它们没有在同一个部分或文件中定义，我们必须确保所有文件都具有适当的变量、mixin、函数等知识。
如果您有一个main.scss Sass 文件，该文件将使用两个（或更多）导入的部分文件进行编译。使用@use 和@forward 规则的最佳方法是在与main.scss 文件相同的级别创建一个目录（或在其他地方使用正确的路径）并创建一个索引文件_index.scss 以加载整个带有单个 @use 规则的部分目录。
注意：所有
@useat-rules 必须放在文件的顶部。
此索引文件将是您放置@forward 规则的位置，对您要加载到索引文件中的每个部分使用@forward "<url>";。将其视为一个大模块，您可以在 main.scss 文件中使用单个 @use 规则将其加载到其他地方，从而使您可以访问加载到 /partials 目录中该索引文件中的所有部分文件。
- main.scss
- partials/
- _index.scss
- _variables.scss
- _layout.scss
...
与示例一起，假设您的 _variables.scss 部分文件看起来像这样，并且不依赖于任何其他文件：
$mainHeaderColor: #222;
$someOtherVar: #f06;
如果_layout.scss 部分想要使用在_variables.scss 中定义的变量，我们必须包含@use 规则以让_layout.scss“知道”加载的成员。
@use "./variables" as v;
/* _layout.scss */
h1 {
/* now this works as expected */
color: v.$mainHeaderColor;
}
如果您不想在使用@use 加载时定义命名空间，只需编写@use "<url>" as <namespace>;，其中命名空间是星号* 表示不会定义命名空间，因此您可以像@987654368 一样使用它@ 而不是 v.$mainHeaderColor。请注意，如果您不小心，这可能会导致命名冲突。
现在要将这些部分加载到将被编译的 main.scss 文件中，您可以为 _layout.scss 和 _variables.scss 部分使用两个单独的 @use 规则，或者创建一个索引文件 (_index.scss) 和使用单个 @use 规则加载 /partials 目录，让您可以访问目录中的所有部分。
@forward "./variables";
@forward "./layout";
/* partials/_index.scss */
瞧！现在剩下的就是将/partials 目录加载到main.scss 文件中以进行编译，以便以后使用。 _layout.scss 部分通过我们的单个 @use 规则加载到 main.scss 中，我们还可以访问 _variables.scss 变量或在索引文件中转发的任何其他部分文件。
@use "./partials" as *;
/* main.scss */
h2 {
color: $mainHeaderColor;
background: $someOtherVar;
}
如果你有一个像./mixins 这样的mixin 目录，那么你将遵循相同的工作流程，将所有部分文件放在/mixins 目录中，然后创建一个_index.scss 文件以使用@forward 规则加载部分文件.最后使用单个@use 规则加载目录，让您可以通过索引文件访问特定目录中加载的所有部分。我使用/partials 目录作为“起点”，但创建/vars、/mixins 等目录并将文件放在各自的目录中以获得更好的结构/组织会更有意义。
【讨论】：