Угловой, используя шрифт из «тема» NPM в библиотеке угловых компонентовCSS

Разбираемся в CSS
Ответить
Anonymous
 Угловой, используя шрифт из «тема» NPM в библиотеке угловых компонентов

Сообщение Anonymous »

Я создал «тема» пакета NPM, которая содержит определения @font-face и font-size. Этот пакет NPM интегрирован в угловую библиотеку «общие элементы», которая содержит компоненты. Эта библиотека затем интегрирована в фактическое угловое приложение «Web-App».⠋ Compiling with Angular sources in Ivy partial compilation mode.X X [[ERRORERROR]X ]X [ [Could not resolve "../fonts/webfont.woff"ERRORCould not resolve "../fonts/webfont.woff"ERROR ] ][plugin angular-css-resource] [plugin angular-css-resource] Could not resolve "../fonts/webfont.woff"Could not resolve "../fonts/EuH_SansBol.woff"
:994:11:
:994:11:
994 │ src: url( 994 │ src: url([plugin angular-css-resource]"../fonts/webfont.woff"[plugin angular-css-resource]"../fonts/webfont.woff"
< /code>
Библиотека уже существовала ранее. В этой библиотеке не @Forward или @USE, но @IMPORT и пакет темы NPM могут быть просто интегрированы без ошибок.+ src
+ assets
+ fonts
web-font.woff
+ scss
_fonts.scss
theme.scss

_fonts.scss
@font-face {
font-family: "webFont";
src: url("../fonts/web_font.woff") format("woff");
font-weight: 400;
font-style: normal;
}

$font-size-default: 16px;
$font-size-small: 14px;
$font-size-large: 18px;

heme.scss
@forward "xy";

@forward "fonts"; // before @include "fonts";
@use "fonts";
< /code>
Когда я создаю пакет, существует папка Dist \ Assets со следующей структурой < /p>

css (содержит созданные файлы CSS) < /li>
fonts (содержит шрифт) < /li>
scss (содержит исходные значения SCS) /> < /ul>
Я хотел бы интегрировать этот пакет в угловую библиотеку «общие элементы», которая предоставляет компоненты (например, кнопка, ..). Для этого я устанавливаю пакет (также виден в Node_Modules с содержимым папки Dist \ Assets) < /p>
Однако я не могу указать какие -либо активы в angular.json, потому что тип проекта - это «библиотека». < /P>
"shared-elements": {
"projectType": "library",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/shared-elements",
"sourceRoot": "projects/shared-elements/src",
"prefix": "xy",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/shared-elements/ng-package.json"
},

"configurations": {
"production": {
"tsConfig": "projects/shared-elements/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/shared-elements/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},


Подробнее здесь: https://stackoverflow.com/questions/797 ... nt-library
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»