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

Question

我可能在这里遗漏了一些明显的东西 - 我正在尝试使用 SCSS 编译我的 Bootstrap，这样我就可以 select 我需要的文件。在我到达边距和填充类（例如 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";

Answer 1

边距和填充类（例如 mt-0）的映射在 _utilities.scss [1] 文件中，但是它使用 [=21= 生成类 ].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)

Answer 2

我最近遇到了同样的问题。每个 class 工作，除了 classes 用于 margin/padding.

现在（来自bootstrap V5.0）left被start取代，right被end取代。

所以把mr-3改成me-3

Here's why

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

Import Spacing (margin, padding etc) with SCSS in Bootstrap 5

sass

bootstrap-5