我的SCSS结构:
main.scss:
@import '~bootstrap/scss/functions';
@import 'theme/variables';
@import '~bootstrap/scss/bootstrap';
@import 'theme/theme';
主题.scss:
...
@import "utilities"
utilities.scss:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
以上基本上是文档中的示例。这应该添加新的溢出实用程序类。然而,没有添加任何内容。有什么想法吗?
将
@import "bootstrap/scss/bootstrap"
移至附加实用程序声明之后。
更多详情
在撰写此答案时(2021 年 5 月),对于Bootstrap v5.0.0-beta3,以下解决方案应该有效,如官方文档中所述:
https://getbootstrap.com/docs/5.0/utilities/api/#changing-utilities
使用相同的密钥覆盖现有实用程序。
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
@import "bootstrap/scss/bootstrap";
请注意:
@import "bootstrap/scss/bootstrap"
应位于之后附加公用事业的声明。
API / 启用响应式 中所述?
该示例适用于“边框”实用程序,我尝试了这样的操作,并且它有效:
$utilities: map-merge(
$utilities, (
"overflow": map-merge(
map-get($utilities, "overflow"),
( responsive: true ),
),
)
);
@import "~bootstrap/scss/utilities";
// Your utilities overrides
$utilities: (
"text-decoration": (
property: text-decoration,
class: td,
state: hover,
values: none underline line-through overline,
),
);
@import "~bootstrap/scss/utilities";