问题描述
按照 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 因为 $utilities 未定义否则
- 目标是添加一个新属性以使按钮变圆。简单示例以测试新 API。虽然不工作
- 我正在使用 https://github.com/twbs/bootstrap-npm-starter 来编译 scss 文件: src 是 starter.scss,输出是 starter.css
我找不到新属性 button-rounded
解决方法
当 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.0.1 开始,这会更合适:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";
$utilities: map-merge(
$utilities,)
);
不再需要在最后导入“bootstrap”。
,Bootstrap 5.0.1,不知何故 map-merge($utilities ...)
但是 bootstrap 还有一个扩展点:通过覆盖每个 $var 默认值
以下将合并到 @import '~bootstrap/scss/utilities';
$utilities: (
'event-type': (
property: background-color,class: 'event-type',// <- somehow this required
values: (
commit: #BADA55,issue: #C0FFEE,);
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/utilities/api';