Можно ли импортировать значки начальной загрузки в файл scss?

Question

Можно ли импортировать и расширить bootstrap-icons.css в файле scss, как при импорте bootstrap.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

Да, можно импортировать значки начальной загрузки через scss.

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

Answer 2

Вы можете импортировать файл «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 3

Все ответы неполные или неправильные.

Вам нужно 2 вещи:

• переопределить переменную начальной загрузки $bootstrap-icons-font-src, которая установлена ​​неправильной компиляцией пути для запуска веб-пакета на бис

• импортируйте bootstrap-icons.scss с относительным путем в файл global.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
• Webpack на бис