Встраивание шрифтов fortawesome в продуктовую сборку проекта
 

В проекте используется пакет @fortawesome/fontawesome-free. Это официальный пакет от сайта https://fontawesome.com/
При подключении ссылки на css файл в корневой styles.scss вида:

@import '@fortawesome/fontawesome-free/css/all.css';

CSS файл подключается в основной css и проект нормально собирается. Но все шрифты, которые подключает этот CSS при продуктовой сборке попадают в корень этой самой сборки. И у меня имеется куча файлов, кторые в корне не особо нужны:
fa-brands-400.273dc9bf9778fd37fa61.ttf
fa-regular-400.d2e53334c22a9a4937bc.svg
fa-solid-900.7a5de9b08012e4da4050.svg
и т.д.

Есть большое желание переместить всю пачку используемых шрифтов в папку скажем, ./assets/webfonts/
Для этого, в angular.json в секции assets добавил строчку:

{ "glob": "**/*", "input": "node_modules/@fortawesome/fontawesome-free/webfonts", "output": "./assets/webfonts/" },

После сборки шрифты в папку ./assets/webfonts/ копируются. Да только CSS файл использует старые ссылки в корень сборки опять попадают файлы шрифтов.

В папке компонента @fortawesome имеется папка scss, в которой лежит разобранный на запчасти css файл.
Подключил в проект в файл styles.scss файл fontawesome.scss из этой папки, который, в свою очередь, содержит ссылки на файлы. Т.е. он просто подключает и собирает мелочевку в кучу.
Необходимо также подключить файл regular.scss, который содержит подключение шрифтов. И тут вылазит ошибка сборщика css.

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--13-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\PROJECTS\DTEK\admin\node_modules\@fortawesome\f ontawesome-free\scss\regular.scss:13:2: Can't resolve '../webfonts/fa-regular-400.woff2' in 'C:\PROJECT\src'

11 | font-display: $fa-font-display;
12 | src: url('#{$fa-font-path}/fa-regular-400.eot');
> 13 | src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),

При этом, переменная $fa-font-path объявлена. Я планировал переопределить значение переменной и направить ее в папку ./assets/webfonts/. Но пока не получается.

А теперь вопросы :о)
1. Можно ли сделать так, чтобы сборка проекта прошла так, чтобы шрифты, на которые ссылается css можно было поместить в папку ./assets/webfonts/ и этот css ссылался на эту папку.
2. Возможно, более правильный путь выполнять сборку css, используя scss, и переопределив переменную пути, где лежат файлы шрифтов. Тогда почему вылезает такая ошибка и как ее поправить?
Зараннее спасибо.

Как переменную переопределяете? Надо через @use директиву https://sass-lang.com/documentation/...default-values
Вот только подозреваю что файлики со шрифтами должны изначально в assets лежать, а не копироваться во время сборки.

//update
Оказывется @use пока не поддерживается в стандартном вебпаковском sass-loader. Нашлось такое решение: при сборке проекта указываем --resourcesOutputPath=assets и в styles.scss обычный импорт @import '@fortawesome/fontawesome-free/css/all.css';

Спасибо за подсказку. Поковыряюсь.

Дошли руки и доковырял. :о) Решение:
1. В проект подключил @fortawesome/fontawesome-free
2. В styles.scss включил такой код:

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
$fa-font-path: "/assets/webfonts";
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

В angular.json включил такой код:

"assets": [
    "src/favicon.ico",
    "src/assets",
    { "glob": "**/*", "input": "node_modules/@fortawesome/fontawesome-free/webfonts", "output": "./assets/webfonts/" },
],

Теперь кастомные шрифты не лепятся в сборку, а копируются в /assets/webfonts/