是否可以在scss文件中@导入引导图标并通过@extend在其他scss类中使用它？

Question

是否可以像导入bootstrap.scss那样在scss文件中导入和扩展引导图标scss？

到目前为止，我尝试过的都没有成功：

@import "../node_modules/bootstrap-icons/font/bootstrap-icons";

.right-square-icon{
  font-size: 4rem;
  @extend .bi;
  @extend .bi-caret-right-square;
  @extend .text-dark;
}

有错误：

没有找到选择器".bi“。

Answer 1

您可以导入"bootstrap-icons.scss“文件，并编辑字体文件的位置变量如下-

$bootstrap-icons-font-src: url("../webfonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d") format("woff2"), url("../webfonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d") format("woff");

@import "~bootstrap-icons/font/bootstrap-icons.scss";

Answer 2

是的，可以通过scss导入引导图标。

@import "~bootstrap-icons/font/bootstrap-icons.css";