0

I want to change $spacer variable to make all margins bigger, but it just don't work. I'm trying to change it through SASS:

@import url(../node_modules/bootstrap/scss/_functions.scss);
@import url(../node_modules/bootstrap/scss/_variables.scss);
@import url(../node_modules/bootstrap/scss/_utilities);

$spacer: 15rem;

@import url(../node_modules/bootstrap/scss/bootstrap.scss);

:root {
  --bs-body-font-family: 'Inter', Arial;
}

h1 {
  font-size: 5.93rem;
  line-height: 121%;
}

h2 {
  font-size: 2.5rem;
  line-height: 212%;
}

h3 { 
  font-size: 1.5rem;
  line-height: 120%;
}

I tried to place this $spacer: 15rem where it should be. After import function.scss and before bootstrap.scss.

Here is output css file:

@import url(../node_modules/bootstrap/scss/_functions.scss);
@import url(../node_modules/bootstrap/scss/_variables.scss);
@import url(../node_modules/bootstrap/scss/_utilities);
@import url(../node_modules/bootstrap/scss/bootstrap.scss);
:root {
  --bs-body-font-family: 'Inter', Arial;
}

h1 {
  font-size: 5.93rem;
  line-height: 121%;
}

h2 {
  font-size: 2.5rem;
  line-height: 212%;
}

h3 {
  font-size: 1.5rem;
  line-height: 120%;
}

I found the first problem, I used @import url(./././././.), but now I use @import "././././" and css output now normal. But it's still don't change margins.

Aogava
  • 23
  • 1
  • 5
  • 1
    Are you certain you've rebuild the CSS and aren't getting a cached version? Have you looked at the final rendered CSS to see what it contains? – ceejayoz Apr 19 '23 at 12:07
  • @ceejayoz I added result css after compiling scss file – Aogava Apr 19 '23 at 17:44
  • If you changed the @imports as you stated you should not see the `@import url(...` in the output. It should only show the CSS. Something's wrong with how your compiling the SASS, and if we can't reproduce it we can't help. – Carol Skelly Apr 19 '23 at 19:19
  • Does this answer your question? [How to extend/modify (customize) Bootstrap with SASS](https://stackoverflow.com/questions/45776055/how-to-extend-modify-customize-bootstrap-with-sass) – MrUpsidown Apr 19 '23 at 20:07

1 Answers1

1

As stated in the Bootstrap 5 docs,

Variable overrides must come after our functions are imported, but before the rest of the imports.

So changing the $spacer value should be simply:

// required
@import "functions";

// default variable overrides
$spacer: 5rem;

// individual imports or bootstrap entirely
@import "bootstrap";

SASS demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I edited scss how you wrote, but margins still the same... You can see result css file at my question. – Aogava Apr 19 '23 at 17:45