Bdtjtk

Created(ng build my-lib) an angular lib with global scss then bundled into one file and copied to lib's folder.

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

Now my-lib.scss imports some resources like

@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 */

}

I copied the resources folder to my lib at location

dist-lib/my-lib/lib/resources

                             /fonts

                                   / roboto-regular/Roboto-Regular.eot

Now in my Application's styles.scss file I am importing my-lib.scss file like this

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

But this is showing error

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:SKStudyAngularAngularLibMyLibdist-libmy-liblibsassmy-lib.scss:10:9: 

Can't resolve '../resources/fonts/roboto-regular/Roboto-Regular.woff' in 'D:SKStudyAngularAngularLibMyLibsrc'



   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"); 

I guess the resources are getting resolved relative to file src/styles.scss instead of relative to dist-lib/my-lib/lib/sass/my-lib.scss

What is the solution for this?

As I am building/serving my project through Angular-Cli, so the plugins/loaders that it uses to deal scss was not resolving the issues of relative (to the library itself) URLs (url(../)).

To solve this I created fonts.css not fonts.scss that I ship with the library. And end user has to import this fonts.css as well.

And this is working now, though this does not sound a good solution, I got this workaround till the time.