Solvedangular cli webpack: loading fonts (specifically font-awesome)

Using the webpack branch and am attempting to load in font-awesome. Loading other 3rd party libs so far has been amazing in comparison to how it was before.
I'm having an issue with getting webpack to pickup the font-awesome files. Getting 404 errors in console:

http://localhost:4200/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3 
http://localhost:4200/node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3 
http://localhost:4200/node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3 404 (Not Found)

I'm using node-sass, and I've tried a large combination of things:

$fa-font-path: 'node_modules/font-awesome/fonts';
$fa-font-path: 'font-awesome/fonts';
$fa-font-path: '~/font-awesome/fonts';

I've tried font-awesome-loader and including that via JS. Other people recommend having a webpack-config.js, which doesn't seem to do anything either as I'm guessing angular-cli goes around that?

22 Answers

✔️Accepted Answer

#1633 seems to fix this. I got it to work with CSS imports via @import '../node_modules/font-awesome/css/font-awesome.css';

Saw that fonts were found and bundled.

Other Answers:

I second something like this. Angular-CLI should really be able to pull files from node_modules directories. Honestly, what might be helpful is 'mapping' the assets files...like, specifying a source path.

Right now it assumes the path based on the app source files.

"assets": [ "assets", "favicon.ico" ]

And it knows to look at /project/src for /assets and favicon.ico and places them in a comparable location in the dist output. This works well for items that are in the /src directory.

What might be better is being able to specify where the file is in your project and where it should go? /src could still be the starting place. For example (with the addition of font awesome to illustrate):

"assets": [ { source: "assets", output: "assets" }, { source: "favicon.ico", output: "favicon.ico" }, { source: "../node_modules/font-awesome/fonts", output: "fonts" } ]

So, you would end up with both assets and a fonts folder in your /dist, and then you could just point your css file accordingly. Something like that at least.

setting font-awesome.css in angular-cli.json is not impressive solution. Would like to see native SCSS style solution. i.e., $fa-font-path: "/node_modules/font-awesome/fonts" !default;

      "styles": [
        "styles.scss",
        "../node_modules/font-awesome/css/font-awesome.css"
      ],

I think this is well-documented in sass-loader. Since, font-awesome uses relative path for fonts, webpack would have hard time resolving to the path generated from sass-loader so to solve that problem, as stated in the sass-loader readme - install resolve-url-loader and just place it just before sass-loader and css-loader
e.g.

// for webpack v1.x
{ 
  test: /\.scss$/,
  loader: "style-loader!css-loader!resolve-url-loader!sass-loader"
}

or

// for webpack >2.x
{ 
  test: /\.scss$/,
  use: "style-loader!css-loader!resolve-url-loader!sass-loader"
}

Alternative solution, also as stated in the sass-loader readme is to overwrite the $fa-font-path variable of font-awesome if for some reason you're not able to use resolve-url-loader.

e.g.

$fa-font-path: "~font-awesome/font";
@import "~font-awesome/scss/font-awesome";

Is there any workaround for this? I can't get webpack to include font-awesome or bootstrap CSS; most of the documentation says to add settings to your webpack.config.js but this doesn't seem to exist in the angular-cli setup? It would be nice to have some sort of explanation as to how angular-cli handles the webpack.config.js file/settings/etc.

More Issues: