SassError：未定义的变量答案

【问题标题】：SassError: Undefined variableSassError：未定义的变量
【发布时间】：2022-07-30 01:17:31
【问题描述】：

我有一个变量文件，其中包含两个我想要覆盖的主题定义：

_vars.scss

body {
  $bg-color: #fff
}
body.theme-dark {
  $bg-color: #333
}

我正在调用 Angular 按钮组件中的变量：

button.scss

@import '_vars.scss';

.button {
  background-color: $bg-color;
}

但我收到以下编译错误：

SassError：未定义的变量。

背景色：$bg-color;

根据我的身体主题类覆盖变量的正确方法是什么？谢谢

【问题讨论】：

【解决方案1】：

您根据主题定义$bg-color，但从不定义$font-size-18。

顺便说一句，如果我站在你的立场上，我会考虑使用 CSS Custom Properties 而不是 SASS 变量。 Codyhouse 有一篇有趣且易于理解的文章，其中也谈到了颜色主题。

如果您想深入了解这个主题，您可能需要阅读this article。

【讨论】：

【解决方案2】：

首先，范围内的所有变量仅在该范围内有效，而不是普遍有效。现在你的问题见下文：-

_vars.scss

不要在主体范围内创建变量，而是在全局范围内创建它。

$bg-color: #fff;

body {
  background-color: $bg-color;
}

然后将其导入您的 button.scss 不带下划线“_”

@use "vars" as *;

button {
  background-color: $bg-color;
}

【讨论】：