Bootstrap 5：不能使用实用程序

Question

我已将我的项目从 Bootstrap 4.5 更新到 Bootstrap 5。我通过简单地用npm install bootstrap@next. 现在我遇到了无法再使用引导实用程序的问题。即使它们是导入的，它们似乎也没有被编译到样式表中。

我的 app.scss 文件：

@import "variables";

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

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

例如，如果我现在尝试使用 隐藏在元素中.d-none，那么这没有效果。编译后的样式表也不包含实用程序类。

Answer 1

BS5 中的文件结构发生了变化（与 BS4 相比）。

该_utilities.scss文件现在只创建一个包含$utilities所有...实用程序的变量。另一个文件utilities\_api.scss在编译时生成实用程序 CSS。

对于您的案例使用：

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

请务必阅读有关 API 如何工作的文档。