Can't overwrite Bulma navbar color

问题

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.

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

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

Tried to overwrite the colors in this file

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

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";

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

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

回答1:

I am pretty sure this isn't the right way to do it, but when i use bulma I just download the https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css file (remove the .min) and edit that file.

来源：https://stackoverflow.com/questions/60901806/cant-overwrite-bulma-navbar-color

标签

Sass

bulma