'Change bootstrap 4 warning background color

Working with Laravel 8 and bootstrap 4 I'm trying to change the 'warning' color.

I am using adminlte theme, so in my admin-app.scss I did this:

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import 'adminlte/scss/adminlte.raw';

$theme-colors: (
  "warning": $warning,
);

In adminlte.raw I have this:

@import "bootstrap-variables";
@import "variables";
@import "mixins";

@import "parts/core";
@import "parts/components";
@import "parts/extra-components";
@import "parts/pages";
@import "parts/plugins";
@import "parts/miscellaneous";

In the variables file:

$gold: #c48725 !default;
$dark-red: #A91519 !default;
$dark-green: #076b02 !default;
$warning: #ffdf89 !default;

$colors: map-merge(
  (
    "lightblue": $lightblue,
    "navy": $navy,
    "olive": $olive,
    "lime": $lime,
    "fuchsia": $fuchsia,
    "maroon": $maroon,
    "gold": $gold,
    "dark-red": $dark-red,
    "dark-green": $dark-green,
    "warning": $warning,
  ),
  $colors
);

I run npm run dev all successful

I can use class bg-gold, for example, and it works fine.

Yet, the .bg-warning class stays with the wrong yellow color and I get these two entries in firebug:

.bg-warning {
  background-color: #ffc107 !important;
} //from admin-app.css line:30468

.bg-warning {
  background-color: #ffc107 !important;
}// This one is greyed out from admin-app.css line: 6147

And none of these get the actual color I am setting for warning: #ffdf89

This color is being set in the _bootstrap_variables file that is being called in the adminlte.raw file, but I'm calling the _variables file that changes it after the bootstrap_variables file. Why doesn't it change the color?

I tried adding a new color: In variables:

...
$my-warning: #ffdf89 !default;

$colors: map-merge(
  (
    "lightblue": $lightblue,
    "navy": $navy,
    "olive": $olive,
    "lime": $lime,
    "fuchsia": $fuchsia,
    "maroon": $maroon,
    "gold": $gold,
    "dark-red": $dark-red,
    "dark-green": $dark-green,
    "my-warning": $my-warning,
  ),
  $colors
);

In admin-app.scss:

$theme-colors: (
  "gold": $gold,
  "dark-red": $dark-red,
  "dark-green": $dark-green,
  "my-warning": $my-warning,
);

Now .bg-my-warning works, but .alert-my-warning get the old yellow.

What am I missing?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source