如何解决Angular - Bootstrap 5“实用程序”未编译
我已经升级了我的 angular 应用程序以使用 bootstrap 5 样式。由于引导程序 5 删除了许多实用程序,例如 cursor-pointer
,我现在必须自己定义要使用的实用程序。我尝试使用 api as described in the docs,但没有成功。我编写的所谓实用程序永远不会出现在生成的 css 文件中。
在 styles.scss 中,我根据文档编写了以下实用程序:
/* You can add global styles to this file,and also import other style files */
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,(
"cursor": (
property: cursor,class: cursor,// responsive: true,// values: auto pointer grab
values: (
pointer: pointer,grab: grab
)
)
)
);
因此应该将其编译为样式规则,例如 .cursor-pointer { cursor: pointer }
和 .cursor-grab { cursor: grab }
。但是当我查看生成的 styles.css 时,我定义的规则无处可寻。
我发布了一个 repository here。
我在这里遗漏了什么?
解决方法
解决方案
https://stackblitz.com/edit/angular-ivy-mzexcm?file=src%2Fstyles.scss
- 不是通过
bootstrap.scss
导入angular.json
,而是从styles.scss
导入:
angular.json
{
...,"projects": {
"ng-draggable-listview-demo": {
...,"architect": {
"build": {
...,"options": {
...,"styles": [
//"node_modules/bootstrap/scss/bootstrap.scss","projects/ng-draggable-listview-demo/src/styles.scss"
]
}
},...
}
}
}
}
src/styles.scss
$utilities: () !default;
$utilities: map-merge(
$utilities,(
"cursor": (
property: cursor,class: cursor,values: (
pointer: pointer,grab: grab
)
)
)
);
@import '~bootstrap/scss/bootstrap.scss';
现在您可以同时使用引导程序实用程序(例如 float-end)和您自己的实用程序(例如 cursor-grab):
<body>
<ul class="list-group cursor-grab">
<li class="list-group-item" *ngFor="let item of items">
<span class="float-end">{{ item }}</span>
</li>
</ul>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。