Bootstrap5:不能使用实用程序
我已将我的项目从 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,那么这没有效果。编译后的样式表也不包含实用程序类。
回答
BS5 中的文件结构发生了变化(与 BS4 相比)。
该_utilities.scss文件现在只创建一个包含$utilities所有...实用程序的变量。另一个文件utilities_api.scss在编译时生成实用程序 CSS。
对于您的案例使用:
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";
请务必阅读有关 API 如何工作的文档。