Переопределить переменную CoreUI
Итак, есть этот драгоценный камень https://github.com/pelted/coreui-rails, который использует CoreUI, который является шаблоном администратора начальной загрузки.
Теперь этот шаблон переопределяет цвета 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/#components
бутстрап обещает:
«Многие компоненты и утилиты Bootstrap построены с использованием циклов @each, которые повторяются по карте Sass. Это особенно полезно для генерации вариантов компонента с помощью нашего $theme-colors и создания адаптивных вариантов для каждой точки останова. Настраивая эти карты Sass и перекомпилируя, вы будут автоматически видеть ваши изменения, отраженные в этих циклах ".
Это я делаю неправильно или проблема с драгоценным камнем? Я не Ruby-разработчик, я пытаюсь заставить работать фронтенд-часть.
Любая помощь будет очень признательна.
Ответы 2
Я думаю, вы столкнулись с проблемой специфики css. Я бы попробовал сначала поставить @import "core-variables", и если это не сработает, вы всегда можете добавить !important после своих переменных, чтобы убедиться, что их специфика имеет приоритет.
Аллилуйя!
Получается, что проблема действительно была в этом драгоценном камне 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
);
спасибо, но боюсь, что это не так. Я обновил вопрос