是否可以在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;
}

出现错误：

找不到选择器“.bi”。

Answer 1

是的，可以通过 scss 导入 bootstrap-icons。

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

Answer 2

您可以导入“bootstrap-icons.scss”文件并像这样编辑字体文件的位置变量 -

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

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

Answer 3

所有回复不完整或错误。

你需要两件事：

• 覆盖 $bootstrap-icons-font-src bootstrap 变量，该变量由 webpack encore 的错误路径编译设置

• 使用 global.scss 文件中的相对路径导入 bootstrap-icons.scss

结果：

$bootstrap-icons-font-src: url("../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"), url("../../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.scss";

然后，就像魅力一样奔跑：

<i class="bi bi-plus-square-fill" style="font-size: 2rem; color: cornflowerblue;"></i>

回复背景：

• PHP 8
• Symfony 6.2
• Webpack 再来一次