无法覆盖 Bulma 导航栏颜色 [英] Can't overwrite Bulma navbar color

问题描述

我正在尝试覆盖 Bulma 导航栏中文本的颜色，如果我在常规 SCSS 文件中使用 !important 标签，它会起作用，但我正在尝试使用尽可能少的 !important 标签.

I'm trying to overwrite the color of text in my Bulma navbar, it works if I'm using an !important tag in my regular SCSS files but I'm trying to use as few !important tags as possible.

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

The Bulma docs tell me that I can overwrite the Bulma color variables, but all my attempts have been futile.

到目前为止我尝试过的:创建了一个_bulmaTheme.scss 文件

What I've tried so far: Created a _bulmaTheme.scss file

试图覆盖此文件中的颜色

Tried to overwrite the colors in this file

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

The colors do not get overwritten in the front end, I can see them further down my console as overwritten by the inital value Bulma sets, see attached screenshot of my Chrome console

我有点绝望，所以我尝试设置很多变量，根据我的想法，我应该只需要覆盖 $navbar-link 变量.我的 _bulmaTheme.scss 的内容目前看起来像这样

I got a bit desperate so I've tried to set many variables, according to my brain I should only need to overwrite the $navbar-link variable. The content of my _bulmaTheme.scss currently looks like this

@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 文件是否工作，并且工作得很好.我像这样在我的主 app.scss 文件中导入 Bulma 主题代码

For some reason none of the overwrites do anything, I tested if the scss file works by setting a different color on my body tag and that worked just fine. I import the Bulma theme code in my main app.scss file like so

@charset "utf-8";

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

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

I'm using Bulma in a Gatsby project running Bulma version 0.8.1, any ideas on what I'm doing wrong

推荐答案

你有一个错字，伙计:

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

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

这篇关于无法覆盖 Bulma 导航栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！