Cant override Bootstrap 5 sass variables on new Sage 10 installation

Hello there!

I have followed this great tutorial that works pretty easy for install Bootstrap 5 on Sage 10:

But my problem stucks on what’s to do next. My file app.scss looks like this:

//////////////
@import “bootstrap”;
@import “bootstrap/scss/variables”; // This was an attempt to get the variables to be overwritten. but without effect
@import “bootstrap/scss/bootstrap”;

//Fonts
@import url(‘https://fonts.googleapis.com/css2?family=Advent+Pro:wght@300;500;600&family=Fjalla+One&display=swap’);

// Customize some defaults
$body-color: #333;
$body-bg: #ce5151;
$border-radius: .4rem;
$success: #7952b3;

$font-family-sans-serif: “Advent Pro”, sans-serif;
$font-family-title: “Fjalla One”, sans-serif;
$font-family-base: $font-family-sans-serif !default;

$theme-colors: (
“primary”: #FAA819,
“secondary”: #000000,
“info”: #C5C7C9,
);

h1,
h2 {
font-family: $font-family-title;
color: theme-color(“primary”);
}

h3,
h4 {
color: theme-color(“primary”);
}
//////////////

The only thing that worked on this SASS code was:
h1,
h2 {
font-family: $font-family-title;
}
So import the font, create a new variable and apply it, worked.

But it had no effect on any Theme-color or variables as $body-color or $bg-color.

I know it is more about Bootstrap then Sage. But I really didnt whant to go back to Sage 9!

Thanks for any tip.

I`m answering my own question!
I should use:

@import “bootstrap/scss/bootstrap”;

After all SASS modification. As I was suspecting, was my lack of knowlogy with Bootstrap 5 SASS structure itself.

1 Like