Replacing external css library file with a locally-stored version - css

Question

I have a css library that I import directly in my main css file like this :
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css);
I want to store it locally in my project and import it from its folder
I have tried downloading the file and storing it in my assets/css/ directory then adding the path in angular.json like this:
"styles": [
"src/styles.css",
"src/assets/css/all.min.css"
],
But after ng build (it prints all the css file then clear the terminal then no error) then I launch ng serve but I get Failed to compile
How to do this the most clean way? (without installing unneeded files)

Answer 1

If you're trying to download just the all.min.css, it won't work. The font-awesome css package you were importing directly, makes reference to/ depends on other online packages (e.g. sprites and webfonts). My solution would be to use an npm package of font-awesome, or get it from github.
Copied from the all.css:
.fab {
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }