如何解决Bootstrap 5:不能使用实用程序
我已将我的项目从 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";
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。