无法在SCSS中为Bootstrap 4.3的$spacers添加新间隔项求助

嘿，我太懂你碰到的这个问题了！其实就是SCSS里变量定义和Bootstrap导入的顺序错了，导致自定义的间隔项要么没搭上默认的Bootstrap间隔，要么被默认配置给覆盖了。咱们一步步来解决：

问题根源 #

你现在的代码是先自己定义了空的$spacers，再合并自定义项，然后才导入Bootstrap的变量文件。但Bootstrap的variables.scss里自带了默认的$spacers（从0到5的间隔值），你先把$spacers设为空，等于把默认的间隔都丢了；而且后续导入变量时，虽然有!default标记，但因为你已经定义过$spacers，Bootstrap的默认值不会生效，但你的$spacers里只有自定义的6和7，不是你想要的“在默认基础上添加”的效果。

修正后的正确代码顺序 #

// 第一步：先导入Bootstrap的函数文件
// 因为扩展$spacers会用到它自带的map-merge函数，得提前加载
@import "node_modules/bootstrap/scss/functions";

// 第二步：导入Bootstrap的默认变量
// 这样就能拿到完整的默认$spacers映射（0-5的间隔值）
@import "node_modules/bootstrap/scss/variables";

// 第三步：把自定义的间隔项合并到默认的$spacers里
// 注意顺序：默认映射在前，自定义项在后，这样是添加而不是替换
$spacers: map-merge($spacers, (
  6: ($spacer * 4),
  7: ($spacer * 5)
));

// 第四步：再导入Bootstrap的其他核心文件
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/reboot";

// 之后你还可以按需导入Bootstrap的其他组件，比如grid、buttons之类的

几个关键细节要注意 #

• 别跳过导入functions.scss：Bootstrap的map-merge是它自己实现的函数，不是原生SCSS的，必须先加载这个文件才能正常合并映射。
• 合并顺序不能搞反：如果把自定义项放在前面，默认的$spacers放在后面，那默认值会覆盖你的自定义项，就白忙活了。
• 你HTML里样式表的加载顺序是对的：自定义样式在Bootstrap之后，这样编译后的自定义间隔类能正确覆盖或补充Bootstrap的样式。

内容的提问来源于stack exchange，提问作者Thomas James Thorstensson