是否可以像导入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”。
是的,可以通过 scss 导入 bootstrap-icons。
@import "~bootstrap-icons/font/bootstrap-icons.css";
您可以导入“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";
所有回复不完整或错误。
你需要两件事:
覆盖 $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>
回复背景: