Показать сообщение отдельно
  #1 (permalink)  
Старый 14.01.2020, 16:22
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 77

Встраивание шрифтов 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, и переопределив переменную пути, где лежат файлы шрифтов. Тогда почему вылезает такая ошибка и как ее поправить?
Зараннее спасибо.
Ответить с цитированием