Tuesday, 23 April 2019

How to bundle vendor fonts when creating libraries with Angular cli

I am creating a component library with the Angular CLI (v7.x) and am having trouble figuring out how I get 3rd party font assets needed for css rules to be included in my dist folder generated by ng-packagr.

Due to ng-packagr not supporting scss bundling as per this issue, I am using scss-bundle in a post build task to perform the bundling for me and to put the final bundled scss file into my dist folder.

However, some of the css rules such as font declarations include url references to relative font folders, and these I don't yet have being included in my dist folder.

So for example, in my angular library application I have styles.scss file which contains an entry to import an icon stylesheet:

@import "~primeicons/primeicons.css";

But there is a relative fonts folder where these primeicons live in my node_modules folder which are used for the css.

enter image description here

One approach is I could write a further post build step to bundle these and put them into a fonts folder alongside my concatenated scss file in my dist folder so they can be resolved.

I wondered if there was a smarter way, or some built in way either with ng-packager or angular-cli when building my library to do this?



from How to bundle vendor fonts when creating libraries with Angular cli

No comments:

Post a Comment