Блог

Главная - Вопросы по программированию - переопределение цвета темы bootstrap 4 scss

переопределение цвета темы bootstrap 4 scss

#bootstrap-4

#начальная загрузка-4 #bootstrap-4

Вопрос:

получил мой файл scss, и все настроено правильно, но в приведенном ниже коде цвет фона в файле .header-top по-прежнему отображает цвет из исходных файлов scss, а не оранжевый цвет, который у меня есть в переменной theme-color, которую я написал.

 // Variable Overrides (This needs to be before the @import below that 
imports all bootstrap sass files)
$greyLight: #f7f9fc;

// $theme-colors: (
//     "primary": #0077bc,
//     "secondary": #585858
// );

$theme-colors: (
  "primary": #d95700,
  "secondary": #585858
);

$primary: theme-color("primary");

// MY STYLES
.header-top {
    background-color: $primary;
    color: white;
    height: 40px;
}


// Bootstrap Sass files ( @import imports everything below)
@import "node_modules/bootstrap/scss/bootstrap";

Комментарии:

1. Я думаю, что я исправил это, но хотел бы убедиться, что это правильный способ сделать это, иначе позже не возникнет никаких проблем. я переместил шаг @import в начало файла scss.

2. возникла проблема с неправильной работой btn-primary, поэтому я переместил шаг импорта чуть выше основной переменной, и это исправило кнопку.