无法覆盖布尔玛导航栏颜色

Question

我正在尝试覆盖Bulma导航栏中的文本颜色，如果我在常规SCSS文件中使用！important标签，则可以使用，但是我正尝试使用尽可能少的！important标签。

布尔玛文档告诉我，我可以覆盖布尔玛颜色变量，但是我的所有尝试都是徒劳的。

到目前为止我尝试过的是： 创建了_bulmaTheme.scss文件

试图覆盖此文件中的颜色

颜色不会在前端被覆盖，我可以在控制台的下方看到它们，因为Bulma设置的初始值覆盖了这些颜色，请参阅我的Chrome控制台的屏幕截图

我有点绝望，所以我尝试设置许多变量，根据我的大脑，我只需要覆盖$navbar-link变量。我的_bulmaTheme.scss的内容当前如下所示

@import "bulma/sass/utilities/initial-variables.sass";

$navLinkColor: rgba(156, 2, 2, 0.7);
$navbar-item-color: rgba(156, 2, 2, 0.7);
$navbar-background-colo: $navLinkColor;
$navbar-item: $navLinkColor;
$navbar-item-active-color: $navLinkColor;
$navbar-item-hover-color: $navLinkColor;
$navbar-item-color:  rgba(156, 2, 2, 0.7);
$nav-link: $navLinkColor;
$navbar-link: rgba(156, 2, 2, 0.7);
$navbar: $navLinkColor;


$navbar-item-color: $navLinkColor;
$navbar-item-hover-color: $navLinkColor ;
$navbar-item-hover-background-color: $navLinkColor ;
$navbar-item-active-color: $navLinkColor ;
$navbar-item-active-background-color: $navLinkColor ;

@media screen and (min-width: 1024px) {
  $navLinkColor: rgba(156, 2, 2, 0.7);
  $navbar-item-color: $navLinkColor;
  $navbar-background-colo: $navLinkColor;
  $navbar-item: $navLinkColor;
  $navbar-item-active-color: $navLinkColor;
  $navbar-item-hover-color: $navLinkColor;
  $navbar-item-color: $navLinkColor;
  $nav-link: $navLinkColor;
  $navbar-link: rgba(156, 2, 2, 0.7);
  $navbar-item-color:  rgba(156, 2, 2, 0.7);

  $navbar: $navLinkColor;
}
@import "bulma/bulma.sass";

由于某种原因，这些覆盖都没有做任何事情，所以我通过在body标签上设置其他颜色来测试scss文件是否起作用，并且效果很好。像这样

，将Bulma主题代码导入到我的主app.scss文件中。

@charset "utf-8";

@import "./theme.scss";
@import "./typography.scss";
@import "./bulmaTheme.scss";
...SCSS (and no extra imports) underneath

我在运行Bulma版本0.8.1的Gatsby项目中使用Bulma，关于我做错的任何想法

Answer 1

你有一个错字，伙计：

$navbar-background-colo -> $navbar-background-color

Answer 2

我很确定这不是正确的方法，但是当我使用bulma时，我只是下载了https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css文件（删除了.min）并编辑了该文件。