Я использую node-sass, чтобы связать пользовательскую тему, которая включает в себя _fonts.scss
, включая различные шрифты, такие как:
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url("../fonts/roboto-v15-latin-300.eot"); /* IE9 Compat Modes */
src: local('Roboto Light'), local('Roboto-Light'),
url("../fonts/roboto-v15-latin-300.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
url("../fonts/roboto-v15-latin-300.woff2") format('woff2'), /* Super Modern Browsers */
url("../fonts/roboto-v15-latin-300.woff") format('woff'), /* Modern Browsers */
url("../fonts/roboto-v15-latin-300.ttf") format('truetype'), /* Safari, Android, iOS */
url("../fonts/roboto-v15-latin-300.svg#Roboto") format('svg'); /* Legacy iOS */
}
В моей окончательной компиляции css я вижу :
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url("../fonts/roboto-v15-latin-300.eot");
/* IE9 Compat Modes */
src: local("Roboto Light"), local("Roboto-Light"), url("../fonts/roboto-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v15-latin-300.woff2") format("woff2"), url("../fonts/roboto-v15-latin-300.woff") format("woff"), url("../fonts/roboto-v15-latin-300.ttf") format("truetype"), url("../fonts/roboto-v15-latin-300.svg#Roboto") format("svg");
/* Legacy iOS */ }
Но когда я включаю это в свое приложение (используя Angular CLI), оно не компилируется, поскольку пытается разрешить путь к этим изображениям относительно каталога моего приложения.
например
(испускаемое значение вместо экземпляра ошибки) CssSyntaxError: /Users/robert.parker/Documents/Github/nepal-ng-common-components/projects/ng-generic -components / dist / theme-light. css: 48: 70: Не удается разрешить '../fonts/MaterialIcons-Regular.woff2' в '/Users/robert.parker/Documents/Github/nepal-ng -common-components / projects / ng-generi c -components / dist '
Я могу скопировать папку fonts в целевую папку dist до объединения css, это единственный решение здесь? Или я мог бы сделать что-то вроде встроенных файлов шрифтов, например, версию в кодировке base64?
Структура каталогов тем:
theme-roller/
- assets
- fonts/
- sass/
- theme/
_theme.scss
_fonts.scss
- theme/
- theme.scss
theme.s css
@import '../sass/theme/_theme';
_theme.s css
@import '../_fonts';