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

e1xvtsh3 于 2023-02-20 发布在其他

关注(0)|答案(3)|浏览(103)

是否可以像导入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"。

css

来源：https://stackoverflow.com/questions/69122732/is-it-possible-to-import-bootstrap-icons-in-the-scss-file-and-use-it-via-exten

3条答案

按热度按时间

1l5u6lss1#

您可以导入“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";

赞(0）回复(0）举报 2023-02-20

u7up0aaq2#

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

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

赞(0）回复(0）举报 2023-02-20

u0sqgete3#

所有回答不完整或错误。

- 你需要两样东西**
覆盖$bootstrap-icons-font-src引导变量，该变量由webpack encore的错误路径编译设置
使用全局. 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语言
交响乐6.2
网络包安可

赞(0）回复(0）举报 2023-02-20

我来回答

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

3条答案

相关问题

热门标签

最新问答