如何修复 SCSS 中的未定义变量错误？

Question

我在编写 SCSS 时遇到了未定义变量错误。

1. 我的文件结构是健全的（我相信），因为它将其余文件按应有的方式编译到 main.scss 中。
2. 我使用@use而不是@import。

color: #f22437

vs

color: $clr-primary

Error: Undefined variable.
   ╷
54 │   color: $clr-primary;
   │          ^^^^^^^^^^^^
   ╵
  scss/layouts/_navigation.scss 54:10  @use
  scss/layouts/_all-layouts.scss 11:1  @use
  scss/main.scss 7:1                   root stylesheet

有问题的文件。

更新我将所有@use更改为@import，并且它起作用了。

请帮助我理解为什么这有效以及我如何使用 @use 而不是 @import。似乎是与 SASS 有关的问题，但我仍然可能有错。现在我将“破解”它。

Answer 1

我遇到了同样的问题，在阅读了文档后，他们这样说：

使用 @use 加载的成员（变量、函数和 mixins）仅在加载它们的样式表中可见。如果其他样式表也想访问它们，则需要编写自己的 @use 规则。这有助于轻松准确地弄清楚每个成员来自哪里。如果您想一次从多个文件加载成员，您可以使用 forward 规则从一个共享文件中转发所有成员。

解决方案：

1. 首选解决方案：在要使用变量的样式文件中使用@use，而不是在全局文件中使用@use，并调用该变量，如下所示：

namespace.variablename

2. 按照文档所述使用前向规则
3. 使用 @import 而不是 @use，但根据 this，“Sass 将在未来几年内逐步淘汰它，并最终将其从语言中完全删除”

Answer 2

第一：

@use

目前仅适用于 Dart Sass，不适用于 LibSass 或 Ruby Sass。请参阅 https://sass-lang.com/documentation/at-rules/use 了解最新兼容性

第二：

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables';

body {
  color: variables.$text-colour;
}

在这里检查@whiscode答案：https://stackoverflow.com/a/61500282/2470685

Answer 3

这对我有用

`@使用'变量'；

身体{ 颜色：变量。$文本颜色； }`

Answer 4

我发现了我的变量未定义的另一个原因。您不能在条件内部“声明”变量（即第一次定义它）。我的代码是这样的：

@if $dark-mode { $color: red; }

无论

$dark-mode

评估为什么，当我需要它时，

$color

都没有被定义。 如果我在条件之上添加一个简单的默认声明，它每次都会起作用：

$color: black; // declaration and default
@if $dark-mode { $color: red; }