Can't overwrite Bulma navbar color

你。 提交于 2020-12-07 04:53:45

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!