Cant override Bootstrap 5 sass variables on new Sage 10 installation

sage
,
1

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.

2

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
4

Hi @vibcruz
Can you tell me how did you do that I can’t?

i tried in many ways, now my app.scss file looks like

@import "bootstrap";

@import "common/variables";

/** Import theme styles  */
@import "common/global";

and _variables.scss

$body-font-size: 55px;
$body-font-weight: 800;
$body-line-height: 100px;

I also tried to swap the first two lines of app.scss but without success

Ty

5

Hi! My app.scss looks like this:

//Import variables
@import "common/variables"

//Import bootstrap library
@import "bootstrap/scss/bootstrap"

//Custom styles
@import "layout/header"
@import "layout/footer"

Look at Bootstrap 5 documentation:

// Include any default variable overrides here (though functions won’t be available)
@import "/node_modules/bootstrap/scss/bootstrap";
// Then add additional custom code here
1 Like