Невозможно добавить новые проставки в Bootstraps $ spacer в моем SCSS

Question

По какой-то причине я не могу добавить новые разделители для Bootstrap (4.3) в моем файле SCSS. В HTML моя таблица пользовательских стилей идет после bootstrap.css.

И в моем SCSS порядок такой:

$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";

/*

Теперь, либо я смотрю на слишком высокий стакан Мадейры, либо я упускаю что-то очевидное!В любом случае, спасибо заранее.

Томас (Слово выходит к Таламусу, Хьюсону, Microprose, C64)

Answer 1

Похоже, это может быть связано с упорядочением ссылки на BS и пользовательского Sass.Следующая статья выглядит так, как будто она обеспечивает правильный подход:

Как настроить Bootstrap

Исходя из этой ссылки, ваш код будет:

/* 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";

Answer 2

Сначала нужно @ импортировать необходимые переменные ...

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

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

@import "bootstrap";

https://www.codeply.com/go/MBWS6qkRDw

Похожие: карта перезаписи scss bootstrap 4