dezzignet
@dezzignet

Как переопределить primary color в bootstrap в variable.scss?

Переопределяю цвета из _variables.scss в bootstrap, мне нужно $blue заменить на свой. Соответственно в своем variables.scss я меняю $blue: #a3ccee; и все хорошо все цвета в шаблоне поменялись, кроме цвета ссылок и primary кнопок. Лезу в исходник, нахожу единственное место, где задается переменная $primary добавляю её к себе в variables.scss (который переопределяет исходный _variables.scss). Ничего не происходит. Подскажите, где поменять все цвета $primary
  • Вопрос задан
  • 546 просмотров
Пригласить эксперта
Ответы на вопрос 2
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
Попробуйте так.

// custom.scss
$blue: #2C3E50;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #E74C3C;
$orange: #fd7e14;
$yellow: #F39C12;
$green: #18BC9C;
$teal: #20c997;
$cyan: #3498DB;
$white: #fff;
$gray: #95a5a6;
$gray-dark: #343a40;
$primary: #2C3E50;
$secondary: #95a5a6;
$success: #18BC9C;
$info: #3498DB;
$warning: #F39C12;
$danger: #E74C3C;
$light: #ecf0f1;
$dark: #7b8a8b;
$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;


$navbar-height: 56px + 18px;
$footer-heigth: 80px;

@import '_html.scss';
@import '_header.scss';
@import '_person.scss';
@import '_about.scss';
@import '_feedback.scss';
@import '_footer.scss';
@import '_sharer.scss';
@import '_signin.scss';

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
Ответ написан
Комментировать
Qsppl
@Qsppl
Вы переопределяете цвет после того как исходный файл был выполнен.
610ec85eb6628527827566.png
При этом переменные отмеченные "!default" переопределяются.
610ec8d822bdd551158383.png
Но массивы НЕ обновляются - в них остаются значения записанные при выполнении исходного файла.
610ec942279a9335372015.png
Цвета ссылок и primary кнопок берут значения из массивов, а не из переопределенных переменных, поэтому цвет в них не меняется.
Нужно перезаписать все массивы которые используют эти переменные.
Чтобы изменить значения массива, нужно его перезаписать.
61114e7cdcf79138269089.png
^будьте внимательны. если оставить тег "!default" как в примере выше, переменная не перезапишется.
Но даже так ничего не измениться, потому что css-классы кнопок и ссылок генерируются раньше, чем вы переопределяете цвета.
610ecbedc11e0894764383.png
Для того, чтобы изменить цвета утилит, нужно перезаписать цвета и массив $theme-colors ДО того как утилиты будут сгенерированы.
Так:
610eccb92f915473695316.png
Или так:
610ecce3bed69466696490.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы