Bootstrap 4 Добавить на карту - Добавление дополнительной темы цвета

Question

Как добавить пользовательский новый цвет темы, не касаясь bootstrap variable.scss?

Обратите внимание, что я могу успешно обновить существующий цвет, но я не могу добавить новый цвет темы таким же образом

Структура файла

@import 'custom_variables';
@import './bootstrap/bootstrap'; 
@import './pages/home';

custome_variables.scss

$theme-colors: (
    "primary": #2c67f4, // successfully edited existing color  
    "danger": #ff4136,
    "custom" : "red" // not working when adding new color theme
);

Пробовал с кодом, но не повезло

$theme-colors: map-merge(
  (
    "custom":  "red",
  ),
  $theme-colors
);

Ссылка

Answer 1

Сначала необходимо импортировать переменные ...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
    "primary": #2c67f4,
    "danger": #ff4136,
    "custom" : red
);

@import "bootstrap";

https://www.codeply.com/go/mdlTSDbmUG

См. Также: Настройка шаблона начальной загрузки CSS

Answer 2

$theme-colors: (
  "custom-color": #900
);

<button class="btn btn-custom-color">Sign up free</button>

Попробуй это! У меня это сработало.