使用Bootstrap 5添加新实用程序 [英] Add new utilities with Bootstrap 5
本文介绍了使用Bootstrap 5添加新实用程序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
按照B5新文档,您应该使用新实用程序API添加新实用程序。不过,我还没有得到新的输出。
示例:
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor
responsive: true,
values: auto pointer grab,
)
)
);
我的文件:
@import "bootstrap.scss";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
- 我需要导入bootstrap.scss,否则$Utility未定义
- 目标是添加一个新属性以使按钮变圆。测试新API的简单示例。虽然无法正常工作
- 我正在使用https://github.com/twbs/bootstrap-npm-starter编译SCSS文件: src为starter.scss,输出为starter.css
我找不到新属性四舍五入
推荐答案
当making Bootstrap SASS customizations时,@import "bootstrap"
应在更改后。此外,实用程序文件需要变量文件,而变量文件需要函数文件,因此您必须在更改之前导入全部3个文件.
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
@import "bootstrap";
由于Bootstrap 5当前是测试版,我已为此提交了issue report。
这篇关于使用Bootstrap 5添加新实用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文