css - Bootstrap 5 : Can not use utilities

Question

我已经将我的元素从 Bootstrap 4.5 更新到了 Bootstrap 5。我通过简单地用 npm install bootstrap@next 覆盖所有旧的 Bootstrap 文件来做到这一点。 .现在我有一个问题，我不能再使用 Bootstrap 实用程序了。即使它们是导入的，它们似乎也没有被编译到样式表中。
我的 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";

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