node-sass: включая файлы шрифтов как часть процесса компиляции - PullRequest
0 голосов
/ 10 февраля 2020

Я использую 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';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...