css - 如何修复SCSS中的 undefined variable 错误？

Question

我在编写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

有问题的文件。

File Structure
更新我将所有@use更改为@import，并且它起作用了。
请我理解为什么这样有效，以及如何使用@use代替@import。似乎是与SASS相关的问题，但我仍然可能有错。现在，我将“破解”它。

Answer 1

首先:@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