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.

Thomas (Word go out to Thalamus, Hewson, Microprose, C64)

Zim
  • 329,487
  • 83
  • 671
  • 600
Thomas Thorstensson
  • 183
  • 12

2 Answers2

2

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
  • 429
  • 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

Zim
  • 329,487
  • 83
  • 671
  • 600