2

For some reason, I can't add new spacers to Bootstrap (4.3) in my SCSS file.In the HTML my custom style sheet comes after bootstrap.css.

And in my SCSS the order is like so

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((6: ($spacer * 4),
7: ($spacer * 5)), $spacers);

/*
* Bsp imports
*/
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/variables";

/*

Now, either I been staring down a too tall glass of Madeira, or I'm missing something obvious! In either case, thanks in advance.

MrUpsidown
  • 21,592
  • 15
  • 77
  • 131
Thomas Thorstensson
  • 193
  • 1
  • 13

2 Answers2

3

Looks like this might be down to ordering of the BS reference and the custom Sass. The following article looks as though it provides the right approach:

How to Customize Bootstrap

Based on this reference your code would be:

/* import only the necessary Bootstrap files */
@import "bootstrap/scss/functions"; 
@import "bootstrap/scss/variables";

/* -------begin customization-------- */
$spacers: map-merge((
  6: ($spacer * 4),
  7: ($spacer * 5)), $spacers);

/* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
Paul
  • 499
  • 4
  • 6
0

You need to @import the necessary variables first...

@import "bootstrap/functions";
@import "bootstrap/variables";

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

@import "bootstrap";

https://codeply.com/go/MBWS6qkRDw

Related: scss bootstrap 4 overwrite map

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624