Overriding Bootstrap Sass variables not working when importing individual Bootstrap components

user_13836220 0
Viewed 1236

I'm having trouble understanding how to override/add default variables without importing all of bootstrap. Reading the documentation Bootstrap gives two options, either import all of bootstrap or just the pieces you need.

First option, import all of bootstrap:

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

Second option, import what you need.

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

The problem is if I do option two and try to override or add variables like this:

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

//here I try to add additional spacer sizes
$spacer: 1rem;
$spacers: (
  6: ($spacer * 5)
);

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

Then it doesn't work. If I do the same thing but with the first option, like this:

// Custom.scss
// Option A: Include all of Bootstrap

// Include any default variable overrides here (though functions won't be available)
$spacer: 1rem;
$spacers: (
  6: ($spacer * 5)
);

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

Then it works, but now I'm importing all of bootstrap. I'd just like to know how I do the second option--importing only components you need--while still being able to override variables. You can use the spacer example I'm trying to do here as an example if you have an answer.

bootstrap-5 sass css
1 Answers

Assuming you're using Bootstrap 5 (as the docs show in the question). In order to rebuild all the utility classes after modifying the $spacers map, you need to @import "utilities" and "utilities/api"...

@import "functions";
@import "variables";
@import "mixins";

$spacers: map-merge(
    $spacers, (
        6: $spacer*5,
        7: $spacer*6,
    )
);

@import "utilities";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "utilities/api";

Demo on Codeply

This will let you import only the parts you want.

user_1714560
Related