在实现 @use 模块的 Sass @each 语句中未定义变量答案

【问题标题】：Variable is undefined in Sass @each statement that implements the @use module在实现 @use 模块的 Sass @each 语句中未定义变量
【发布时间】：2021-11-20 10:53:46
【问题描述】：

我使用 Dart Sass 以及 @use 和 @forward 模块开始了一个新的网站项目。

当我在我的 Mac 上使用终端使用 sass --watch static/scss/style.scss:static/css/style.css 编译 Sass 时，输出以下错误：

Error: Undefined variable.
@each $name, $weight in $font-weights {
static/scss/base/_base.scss 2:27  @forward
static/scss/base/_index.scss 3:1  @use
static/scss/style.scss 2:1        root stylesheet

$font-weights 映射如下所示：

$font-weights: (
  "thin": 300,
  "regular": 400,
  "heavy": 700,
);

以下代码包含在基本目录的_base.scss文件中，该文件与包含_typography.scss文件的目录相同strong>$font-weights 地图。

html {
  @each $name, $weight in $font-weights {
    --font-weight-#{$name}: #{$weight};
  }
}

基本目录中的 _index.scss 文件包含以下内容：

@forward "reset";
@forward "typography";
@forward "base";

并且scss根目录下的主style.scss文件包含以下内容：

@use "abstracts";
@use "base";
@use "components";
@use "layouts";

我已经尝试使用 @use "base" as * 和 @use "base" as base 来使用带有和不带有名称空间的 @use，但两者都没有帮助解决问题。

谁能解释一下为什么这对我不起作用。

干杯，

【问题讨论】：

标签： css sass

【解决方案1】：

我能够通过一些额外的工作和一些关于如何使用 @use 的额外阅读来解决这个问题。我在下面详细说明了我的解决方案。

首先，我从 style.scss 主文件中删除了 @use "abstracts" 行，然后将 @use "../abstracts" as a 添加到 _base.scss 文件的顶部。

在我的设置中，_base.scss 文件用于收集从 html 根目录开始并从那里继续的所有元素。

之后，我更新了主 style.scss 文件以使用以下命名空间 @use 导入。

@use "base" as b;
@use "components" as c;
@use "layouts" as l;

希望这可以帮助任何在学习新的 @use 和 @forward 导入系统时遇到类似问题的人。

【讨论】：