无法在我的 SCSS 中向 Bootstraps $spacer 添加新的垫片答案

【问题标题】：Unable to add new spacers to Bootstraps $spacer in my SCSS无法在我的 SCSS 中向 Bootstraps $spacer 添加新的垫片
【发布时间】：2019-09-27 12:04:11
【问题描述】：

由于某种原因，我无法在我的 SCSS 文件中向 Bootstrap (4.3) 添加新的分隔符。在 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";

/*

现在，要么我一直盯着一杯太高的马德拉酒，要么我错过了一些明显的东西！无论哪种情况，提前致谢。

Thomas（消息传到 Thalamus、Hewson、Microprose、C64）

【问题讨论】：

标签： twitter-bootstrap sass bootstrap-4

【解决方案1】：

看起来这可能取决于 BS 参考和自定义 Sass 的排序。以下文章似乎提供了正确的方法：

How to Customize 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";

【讨论】：

【解决方案2】：

您需要先@import 必要的变量...

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

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

@import "bootstrap";

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