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.