Проблема компиляции scss в angular lib, созданной с помощью angular-cli

Question

Создано (ng build my-lib) угловая библиотека с глобальным scss, затем объединенная в один файл и скопированная в папку библиотеки.

dist-lib/my-lib/lib/sass/my-lib.scss

Теперь my-lib.scss импортирует некоторые ресурсы, такие как

@font-face {
    font-family:"Roboto Regular";
    font-weight:normal;
    font-style:normal;
    src: url("../resources/fonts/roboto-regular/Roboto-Regular.eot?") format("eot"),  /* IE9 Compat Modes */
         url("../resources/fonts/roboto-regular/Roboto-Regular.woff") format("woff"), /* Pretty Modern Browsers */
         url("../resources/fonts/roboto-regular/Roboto-Regular.ttf") format("truetype");  /* Safari, Android, iOS */
}

Я скопировал папку ресурсов в мою библиотеку на месте

dist-lib/my-lib/lib/resources
                             /fonts
                                   / roboto-regular/Roboto-Regular.eot

Теперь в файле styles.scss моего приложения я импортирую файл my-lib.scss следующим образом

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

Но это показывает ошибку

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--14-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: D:\SK\Study\Angular\AngularLib\MyLib\dist-lib\my-lib\lib\sass\my-lib.scss:10:9: 
Can't resolve '../resources/fonts/roboto-regular/Roboto-Regular.woff' in 'D:\SK\Study\Angular\AngularLib\MyLib\src'

   8 |     font-style:normal;
   9 |     src: url("../resources/fonts/roboto-regular/Roboto-Regular.eot?") format("eot"),  /* IE9 Compat Modes */
> 10 |          url("../resources/fonts/roboto-regular/Roboto-Regular.woff") format("woff"), /* Pretty Modern Browsers */
     |         ^
  11 |          url("../resources/fonts/roboto-regular/Roboto-Regular.ttf") format("truetype"); 

Я предполагаю, что ресурсы разрешаются относительно файла src / styles.scss вместо относительно dist-lib / my-lib / lib / sass / my-lib.scss

Какое решение для этого?

Answer 1

Поскольку я создаю / обслуживаю свой проект через Angular-Cli, плагины / загрузчики, которые он использует для работы с scss, не решают проблемы относительных (для самой библиотеки) URL (url(../)).

Для решения этой проблемы я создал файл fonts.css, а не fonts.scss, который поставляется вместе с библиотекой. И конечный пользователь также должен импортировать этот файл fonts.css.

И это работает сейчас, хотя это не звучит как хорошее решение, я нашел этот обходной путь до того времени.