Change background color of button in Bootstrap 4

Question

I want to change the color of a button in Bootstrap 4 Alpha 6.

In my _custom.scss I include:

$brand-primary:             $purple;

But to make the button change color from blue to purple I must also include:

$btn-primary-bg:                 $purple;

Shouldn't it be enough to include the first line?

This is all I have in my custom file.

$purple: #a02971;
$brand-primary: $purple;
$enable-rounded: false;

The last line successfully removes the rounded corners of my button, so I know my recompilation of the sass-files are working. But when I look in the generated css, the button background color remains the default blue.

Answer 1

To get color changes to properly propagate during the scss compile, you need to edit the bootstrap.scss file and import custom before variables.

new bootstrap.scss excerpt:

// Core variables and mixins
@import "custom"; // fix problems with variable overrides not propagating
@import "variables";
@import "mixins";
//@import "custom";