Bootstrap 4 / Bootstrap VUE: невозможно перезаписать цвет для @mixin bg-варианта - PullRequest
Новая
       1

Bootstrap 4 / Bootstrap VUE: невозможно перезаписать цвет для @mixin bg-варианта

0 голосов
/ 13 марта 2020

Я использую Bootstrap Vue.

Я хочу использовать этот цвет в качестве основного: 'primary': #FFCC33,.

Итак, у меня есть эти файлы в s css проект Nuxt:

variables.scss

$colors: (
    'light_text_on_sidebar': rgba(255,255,255,.8),
    'green': #69BC66,
    'light_blue': #29ABE2,
    'deep_blue': #00275B,
    'grey': #646464,
    'light_grey': #F1F3F6,
    'dirty_white': #F8FAFC,
    'white': #FFFFFF,
    'shadow': rgba(0, 0, 0, 0.3),
    'black_text': #333333,
    'transparent-white': #ffffff8c,
    'transparent': 'transparent',
);

$theme-colors: (
  'primary': #FFCC33,
  'success': #69BC66,
  'info': #666666
)

У меня проблема с картой 

<b-card header-tag="header" header-bg-variant="primary">

Его фон синий, а не желтый

enter image description here

Как я могу "ввести" / заставить использовать свой собственный цвет (и его возможные варианты)?

CSS генерируется по умолчанию mixins находится в [...]/node_modules\bootstrap\scss\mixins\_background-variant.scss


// stylelint-disable declaration-no-important

// Contextual backgrounds

@mixin bg-variant($parent, $color, $ignore-warning: false) {
  #{$parent} {
    background-color: $color !important;
  }
  a#{$parent},
  button#{$parent} {
    @include hover-focus() {
      background-color: darken($color, 10%) !important;
    }
  }
  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
}

@mixin bg-gradient-variant($parent, $color) {
  #{$parent} {
    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
  }
}
...