Aurelia - Adding Font-Awesome to a webpack asp.net aurelia project - aurelia

Question

I'm using ASP.NET Core 2, latest Aurelia/Aurelia CLI and I have been looking to install Font-Awesome however this does not appear to be that straightforward.
I see this SO question however I do not have an aurelia.json file. This appears to also be a requirement in this SO question as well.
It appears to not be as simple as just adding it via npm.
Given I have an ASP.NET 2 project, Webpack and no aurelia.json file (I do have a package.json if thats what they are referring to) whats the process of including Font Awesome in this regard?

Answer 1

OK, so this turned out to be such a chore to figure out, but at the end of the day, the answer was actually a simple two liner.
I looked at a number of solutions, tried a number of different things, yet time and time again I kept getting what was apparently web-pack ignoring my rules, and just trying to load things as it pleases.
After looking at a number of other stack overflow posts and spending a good few hours trying different bit's in my webpack.config.js file (and the vendor one that gets produced by the dotnet core 2 template), I eventually figured out the following:
1) npm install the version of font awesome you wish to use.
2) In your app.html file, make sure it looks as follows:
<template>
<require from="./app.css"></require>
<require from="font-awesome/css/font-awesome.css"></require>
... rest of your html here ...
</template>
3) Edit your webpack.config.js file so that your rules section looks as follows (This is the most important part)
module: {
rules: [
{ test: /\.ts$/i, include: /ClientApp/, use: 'ts-loader?silent=true' },
{ test: /\.html$/i, use: 'html-loader' },
{ test: /\.css$/i, use: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' }
]
},
If you have other rules you need to keep, then you'll need to merge them and make sure you have no duplicates, or anything like that.
This is a similar answers to others that are on here, but as Iv'e found the other ones just don't seem to work with the dotnet core 2 spa template, where as this one does.
I suspect that as others have said it is something to do with the reg-ex.
One more thing to note.
If you look in webpack.vendor.config.js , you'll see that there is already a rule in there to handle font files, but that seems to get ignored for anything but a simple non versioned statically included file to override the general font, so I left mine in.
Altering the one that's present just doesn't seem to work either.

Answer 2

font-awesome installation has changed a bit with new versions. Moreover aurelia-cli has changed and improved a lot in past few months.
Above answers might not work anymore. Please check my answer here for webpack based aurelia-cli generated project.