bootstrap-vueにカスタムvariantを追加する方法

Question

やりたいこと

bootstrap-vueを利用しており、デフォルトのvariantとは別の色を追加したいのです。

"#E5457D" の色をVueのスタイル色として呼び出したいです。

困っている内容

https://bootstrap-vue.org/docs/reference/color-variants#color-variants-and-css-class-mapping

ドキュメントを見ると、bootstrap/scss/_variables.scss　に定義があるようで、
見よう見まねで以下のように追加したが、うまく反映されていないようです。
修正方法をご教授ください。

(bootstrap/scss/_variables.scss)※抜粋してます

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;
//ここを追加
$momo: #E5457D !default;


$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800,
    //ここを追加
    "momo": $momo
  ),
  $colors
);

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;
//ここを追加
$momo:          $momo !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
//ここを追加
    "momo":     $momo
    
  ),
  $theme-colors
);

          <b-form-group label="Using sub-components:">
            <b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
              <b-form-checkbox value="orange"><b-badge variant="momo">Peach</b-badge></b-form-checkbox>
              <b-form-checkbox value="apple">Apple</b-form-checkbox>
              <b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
              <b-form-checkbox value="grape">Grape</b-form-checkbox>
            </b-form-checkbox-group>
          </b-form-group>