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

问题描述

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

我的文件结构是合理的（我相信），因为它将其余文件编译为 main.scss。
我使用@use 而不是@import。

color: #f22437对比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 有关的问题，但我仍然可能有错。现在我将“破解”它。

标签： csssasscompiler-errorsundefined

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

使用@use 加载的成员（变量、函数和混合）仅在加载它们的样式表中可见。如果其他样式表也想访问它们，则需要编写自己的 @use 规则。这有助于轻松确定每个成员的确切来源。如果您想一次从多个文件中加载成员，您可以使用转发规则从一个共享文件中将它们全部转发。

解决方案：

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

namespace.variablename

使用文档说的转发规则
使用@import 而不是@use，但据此， “Sass 将在未来几年逐步淘汰它，并最终将其从语言中完全删除”

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

问题描述

解决方案

推荐阅读