Angular - Bootstrap 5“实用程序”未编译

编程问答 2022-04-22

问题描述

我已经升级了我的 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>
angularangularbootstrap-5sasssassutilitiesutilities