Bootstrap5: 无法使用实用程序

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 隐藏在元素中，那么这没有任何效果。编译后的样式表也不包含实用程序 class.

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。

Answer 2

按照他们在 Bootstrap 文档中所说的去做。

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


$utilities: map-merge(
   $utilities, (
       "border": map-merge(
          map-get($utilities, "border"), 
          ( responsive: true ), ),
        )
);

@import "../bootstrap/scss/bootstrap";

始终将您的实用程序放在 bootstrap 导入之前。并导入 API.

中提到的 bootstrap 三个文件

Bootstrap5: 无法使用实用程序

Bootstrap 5: Can not use utilities

css

sass

twitter-bootstrap

bootstrap-5