css - 是否可以在 scss 文件中 @import Bootstrap 图标并通过 @extend 在其他 scss 类中使用它？

Question

是否可以像导入 bootstrap.scss 一样在 scss 文件中导入和扩展 bootstrap-icons.css？
到目前为止我没有成功的尝试:

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

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

出现错误:

The selector ".bi" was not found.

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";