Как связать вендорные шрифты при создании библиотек с Angular Cli - PullRequest
Новая
       65

Как связать вендорные шрифты при создании библиотек с Angular Cli

5 голосов
/ 11 апреля 2019

Я создаю библиотеку компонентов с помощью Angular CLI (v7.x) и не могу понять, как получить сторонние шрифтовые ресурсы, необходимые для включения правил css в мою папку dist, сгенерированную ng-packagr.

Из-за того, что ng-packagr не поддерживает связывание scss согласно этой проблеме , я использую scss-bundle в задаче посткомпоновки, чтобы выполнить связывание для меня и поместить окончательный связанный файл scss в мой папка dist.

Однако некоторые из правил css, таких как объявления шрифтов, включают ссылки на ссылки на относительные папки шрифтов, и я еще не включил их в мою папку dist.

Так, например, в моем приложении угловой библиотеки у меня есть файл styles.scss, который содержит запись для импорта таблицы стилей значков: 

@import "~primeicons/primeicons.css";

Но в моей папке node_modules, которая используется для css, есть папка относительных шрифтов, в которой эти примитивы живут.

enter image description here

Одним из подходов является то, что я мог бы написать еще один шаг после сборки, чтобы связать их и поместить их в папку шрифтов рядом с моим сцепленным файлом scss в моей папке dist, чтобы их можно было разрешить.

Я задавался вопросом, был ли более умный способ или какой-то другой, встроенный либо с помощью ng-packager, либо angular-cli, когда собирал мою библиотеку для этого?

Update

Итак, я попробовал использовать папку fonts в корневом каталоге проекта библиотеки (фактически в папке активов) и скопировать ее в корень папки dist после создания библиотеки.

И в моем приложении для игровых площадок, где я пытаюсь использовать упакованные стили в моей реальной библиотеке, у меня есть это:

мой Пб-площадка / SRC / styles.scss 

@import "../../../dist/my-lib/styles";

Но при попытке создать приложение для детской площадки с помощью CLI я получаю: 

ERROR in ./src/styles.scss (/Users/someone/Documents/Github/my-lib-playground/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!/Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src??embedded!/Users/someone/Documents/Github/my-lib-playground/node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from /Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/someone/Documents/Github/my-lib-playground/dist/my-lib-playground/styles.scss:609:56: Can't resolve './fonts/open-sans-v15-latin-700.eot' in '/Users/someone/Documents/Github/my-lib-playground/projects/my-lib-playground/src'

Итак, мой актуальный вопрос:

Как я могу получить в моем ресурсоемком приложении "правильное размещение" правильное включение \ разрешение файлов шрифтов при сборке с cli? Это, очевидно, в настоящее время пытаются решить относительно моего игрового приложения. Какое правильное решение здесь? Или я что-то сделал (а) совершенно неправильно?

Другой путь

Сделайте primeng peerDependency из моей библиотеки и оставьте за собой ответственность разработчика за добавление primeng в их приложение и включение соответствующего стиля в angular.json согласно предложенному ответу Даниэля ниже. Это правильный путь, единственный путь?

Ответы [ 2 ]

4 голосов
/ 24 апреля 2019

Вы должны добавить primeicons как peerDependency, а затем в другом проекте вы должны добавить в angular.json конфигурацию стилей. 

"styles": [
  "node_modules/primeicons/primeicons.css",
],

После этого вы уже импортировали его, так чтобольше не нужны import из my-lib-playground/src/styles.scss.

PrimeNG имеет этот пример на readme из github.https://github.com/primefaces/primeng

1 голос
/ 26 апреля 2019

В проекте библиотеки нет корневого каталога, корневой каталог всегда зависит от корневого каталога проекта, который использует библиотека.

, поэтому либо вы должны импортировать шрифты в основной проект, я знаю, что вы уже пробовали,

поэтому единственный вариант - преобразовать шрифт в base64 и назначить его в CSS.

преобразовать файл шрифта в base64 - https://www.giftofspeed.com/base64-encoder/

объявить шрифт в CSS 

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<BASE64-STRING>) format('truetype');
}
...