1

I'm using Bootstrap Vue.

I want to use this color as primary: 'primary': #FFCC33,.

So, I have these files in scss project 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
)

I have the problem with a card

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

His background is blue and not yellow

enter image description here

How can I "inject" / force to use my custom color (and his eventually variations)?

The CSS is generated by default mixins located in [...]/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;
  }
}
sineverba
  • 5,059
  • 7
  • 39
  • 84
  • This question may help https://stackoverflow.com/q/46200316/1061602 ? – Adam Marshall Mar 13 '20 at 15:39
  • Could you show how you are importing your variable overrides, bootstrap SCSS and BootstrapVue SCSS into your project? SASS variables are not shared across separate module imports of SCSS files. they all need to be `@import` into a single SCSS file and then `import` into your project. – Troy Morehouse Mar 13 '20 at 18:06

0 Answers0