Переопределить переменную CoreUI

Question

Итак, есть этот гем https://github.com/pelted/coreui-rails, который использует CoreUI, который является шаблоном администрирования Bootstrap.

Теперь этот шаблон переопределил цвета Bootstrap, и я хотел бы снова переопределить их для моих цветов (особенно -primary), так что когда я использую, например, btn-primary класс, кнопка будет иметь мой цвет. Я попробовал это, и это не работает.

_core-variables.scss файл

$blue:    #2482dc;

$colors: (
    "blue": $blue
);

$theme-colors: (
    "primary": $blue
)

файл application.scss

@import "coreui-free";
@import "core-variables";

Обновить

Я старался @include функции из Bootstrap или CoreUI, в обоих случаях они не определены, несмотря на то, что они импортированы в гем CoreUI-rails: https://github.com/pelted/coreui-rails/blob/master/vendor/assets/stylesheets/_coreui-free.scss

Еще одно обновление

После еще нескольких исследований, проб и ошибок я обнаружил, что могу только переопределить .btn-primary используя этот код:

.btn-primary {
    @include button-variant(theme-color("primary"), theme-color("primary"));
}

Что хорошо, но это побеждает всю цель theme-colors, По этой ссылке https://getbootstrap.com/docs/4.0/getting-started/theming/ обещания начальной загрузки:

"Многие компоненты и утилиты Bootstrap созданы с @each циклы, которые перебирают карту Sass. Это особенно полезно для генерации вариантов компонента нашими $theme-colors и создание адаптивных вариантов для каждой точки останова. Когда вы настраиваете эти карты Sass и перекомпилируете, вы автоматически увидите свои изменения, отраженные в этих циклах ".

Это я делаю неправильно или это проблема с гемом? Я не разработчик Ruby, я пытаюсь сделать так, чтобы интерфейс работал частично.

Любая помощь будет принята с благодарностью.

Answer 1

Аллилуйя!

Вот и получается, что проблема действительно была в этом драгоценном камне https://github.com/pelted/coreui-rails

я узнал что _core-variables нужно импортировать до coreui-free файл. Поэтому я изменил свое application.scss на это:

@import "core-variables";
@import "coreui-free";

Но это все равно не сработало, поэтому я проверил, что это coreui-free файл сделать. Это выглядит так:

@import "flag-icon/flag-icon";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "simple-line-icons/simple-line-icons";
@import "bootstrap-variables";
@import "bootstrap";
@import "coreui/core";

Оказывается bootstrap-variables по сути, переопределяли мой core-variables каждый раз. Мне нужно было изменить порядок импорта:

@import "bootstrap-variables";
@import "_core-variables";
@import "flag-icon/flag-icon";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "simple-line-icons/simple-line-icons";
@import "bootstrap";
@import "coreui/core";

Теперь переопределяя primary цвет так прост:

$theme-colors: (
    primary: #2482dc
);

Answer 2

Я думаю, что вы столкнулись с проблемой специфичности CSS. Я бы попробовал поставить @import "core-variables" во-первых, и если это не сработает, вы всегда можете добавить !important после ваших переменных, чтобы убедиться, что их специфика имеет приоритет.