在 Bootstrap 5 中使用 SCSS 导入间距（边距、填充等）答案

【问题标题】：Import Spacing (margin, padding etc) with SCSS in Bootstrap 5在 Bootstrap 5 中使用 SCSS 导入间距（边距、填充等）
【发布时间】：2021-05-11 17:09:53
【问题描述】：

我可能在这里遗漏了一些明显的东西——我正在尝试使用 SCSS 编译我的 Bootstrap，所以我可以选择我需要的文件。一切都很好，直到我进入边距和填充类（例如 mt-0）。我认为这些是utilities.scss 的一部分，但显然不是，我似乎无法追踪它们。我在这里遗漏了一个明显的包含吗？

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";


// Optional
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/containers";
@import "../../node_modules/bootstrap/scss/grid";

【问题讨论】：

标签： sass bootstrap-5

【解决方案1】：

margin 和 padding 类（例如 mt-0）的映射位于 _utilities.scss [1] 文件中，但是它使用实用程序/_api.scss [2] 生成类，因此您需要在实用程序下方进口：

@import "../../node_modules/bootstrap/scss/utilities/api";

参考文献

[1] 实用程序文件 (https://github.com/twbs/bootstrap/blob/5f89ea3a0f9b56547eb03b98afcd189b89d7e5a6/scss/_utilities.scss)

[2] 实用程序 API 文件 (https://github.com/twbs/bootstrap/blob/5f89ea3a0f9b56547eb03b98afcd189b89d7e5a6/scss/_utilities.scss)

【讨论】：