Bootstrap 5：无法使用实用程序答案

【问题标题】：Bootstrap 5: Can not use utilitiesBootstrap 5：无法使用实用程序
【发布时间】：2021-06-17 05:09:58
【问题描述】：

我已将我的项目从 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 隐藏在元素中，那么这将无效。编译后的样式表也不包含实用程序类。

【问题讨论】：

标签： css twitter-bootstrap sass bootstrap-5

【解决方案1】：

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

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

供您使用：

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

请务必阅读docs on how the API works。

【讨论】：