自定义 Bootstrap 4 间距答案

【问题标题】：Custom Boostrap 4 Spacing自定义 Bootstrap 4 间距
【发布时间】：2018-01-16 18:40:50
【问题描述】：

我正在尝试向 $spacers Sass 映射变量添加更多大小，但它不起作用。基于 Bootstrap 4 documentation 我应该能够做这样的事情：

  $spacer: 1rem !default;
  $spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3),
  6: ($spacer * 5)
) !default;

这是我添加的自定义行6: ($spacer * 5)

【问题讨论】：

您是否在引导文件之前或之后包含包含相同变量的 sass 文件？
@JosephMarikle 我编辑了 Bootstrap _variables.scss 本身。在这种情况下，顺序重要吗？
我不确定在这种情况下是否重要，但!default 在那里，因此您可以创建自己的最小_variables.scss 文件，您在引导文件之前包含该文件。它覆盖了后面的声明。 !default 使声明检查变量之前是否已经声明过。如果有，它会跳过后一个。
我在引导文件中看不到任何会阻止添加第六个分隔符的内容。我会劝阻您不要直接修改 Bootstrap _variables.scss 文件，但这样做应该可以。您的引导 sass 文件的内容是什么？（不要和“Bootstrap”混淆。我想知道你用sass编译的初始文件的内容。）
@JosephMarikle 我想我知道问题出在哪里。我正在使用的应用程序 (Prepros) 不会编译 Bootstrap 文件，因此我在 .scss 文件中所做的任何事情都不会被翻译成 Bootstrap CSS。关于如何编译它的任何简单建议？

标签： twitter-bootstrap sass bootstrap-4

【解决方案1】：

您是否在引导文件之前或之后包含包含相同变量的 sass 文件？

这个提示为我解决了这个问题 - 将 $spacers 映射声明放在我自己的 _variables.scss 中，放在包含的引导 sass 文件之前。谢谢！

【讨论】：