sass - 在 Bootstrap 5 中使用 SCSS 导入间距(边距、填充等)
问题描述
我可能在这里遗漏了一些明显的东西——我正在尝试使用 SCSS 编译我的 Bootstrap,所以我可以选择我需要的文件。一切都很好,直到我到达边距和填充类(例如 mt-0)。我认为这些是utilities.scss 的一部分,但显然不是,我似乎无法追踪它们。我在这里错过了一个明显的包含吗?
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";
// Optional
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/containers";
@import "../../node_modules/bootstrap/scss/grid";
解决方案
边距和填充类(例如 mt-0)的映射位于 _utilities.scss [1] 文件中,但是它使用实用程序/_api.scss [2] 生成类,因此您需要在实用程序导入下方:
@import "../../node_modules/bootstrap/scss/utilities/api";
参考
[1] 实用程序文件(https://github.com/twbs/bootstrap/blob/5f89ea3a0f9b56547eb03b98afcd189b89d7e5a6/scss/_utilities.scss)
[2] 实用程序 API 文件 ( https://github.com/twbs/bootstrap/blob/5f89ea3a0f9b56547eb03b98afcd189b89d7e5a6/scss/_utilities.scss )
推荐阅读
- flutter - I/flutter(805):PlatformException(no_fragment_activity,local_auth 插件要求活动为 FragmentActivity。,null,null)
- linux - 如何从 linux 机器上的 sbt pack/bin 文件夹执行 scala 项目
- azure-active-directory - WEBSITE_AUTH_CLIENT_SECRET 必须设置
- python - ThreadPoolExecutor 与在 python 中没有它时所用的时间相同
- android - 相机无法在 WebRTC Android 中捕获媒体流
- python - 插入多个值时出现 Sqlite 错误
- jupyter - 如何显示jupyterlab启动输出
- python - 我的游戏中的 Tkinter Python 射击不起作用
- html - 悬停时按钮的背景颜色没有完全改变
- sql - 如何在postgres中自动增加一列?就像那个递增数字之后的一些固定文本