Question

由于某种原因，我无法在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";

/*

现在，要么我一直盯着一杯太高的马德拉酒，要么我就缺少明显的东西！无论哪种情况，请先谢谢。

托马斯（单词传给Thalamus，Hewson，Microprose，C64）

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

Answer 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

无法在我的SCSS中向Bootstraps $ spacer添加新的spacer

2 个答案: