Не могу переписать цвет Bulma Navbar - PullRequest
Новая
       45

Не могу переписать цвет Bulma Navbar

0 голосов
/ 28 марта 2020

Я пытаюсь перезаписать цвет текста на моей навигационной панели Bulma, это работает, если я использую тег! Важный в моих обычных файлах S CSS, но я пытаюсь использовать так мало важных тегов, как возможный.

Документы Bulma говорят мне, что я могу перезаписать переменные цвета Bulma, но все мои попытки были тщетными.

Что я пробовал до сих пор: создал файл _bulmaTheme.s css

Попытка перезаписать цвета в этом файле

Цвета не перезаписываются в передний конец, я могу видеть их дальше вниз по моей консоли как перезаписанные начальными значениями наборов Bulma, см. прикрепленный скриншот моей Chrome консоли enter image description here

Я немного отчаялся поэтому я попытался установить много переменных, по моему мнению, мне нужно только переписать переменную $navbar-link. Содержимое моего _bulmaTheme.s css в настоящее время выглядит следующим образом 

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

По какой-то причине ни одна из перезаписей ничего не делает, я проверял, работает ли файл s css, устанавливая другой цвет на моем тег тела, и это работало просто отлично. Я импортирую код темы Bulma в мой основной файл app.s css примерно так: 

@charset "utf-8";

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

Я использую Bulma в проекте Gatsby под управлением Bulma версии 0.8.1, любые идеи о том, что я делать неправильно

...