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

Question

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

\n

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

\n

color: #f22437与color: $clr-primary

\n

Error: Undefined variable.\n   \xe2\x95\xb7\n54 \xe2\x94\x82   color: $clr-primary;\n   \xe2\x94\x82          ^^^^^^^^^^^^\n   \xe2\x95\xb5\n  scss/layouts/_navigation.scss 54:10  @use\n  scss/layouts/_all-layouts.scss 11:1  @use\n  scss/main.scss 7:1                   root stylesheet\n

\n

有问题的文件。

\n

\n

文件结构

\n

更新我将所有@use 更改为@import，并且它有效。

\n

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

\n

Answer 1

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

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

解决方案：

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

namespace.variablename

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