CODEWITHSUNDEEP
aurelia
si2030
si2030

Reputation: 4035

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

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?

Upvotes: 1

Views: 414

Answers (2)

user728650
user728650

Reputation: 1986

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.

Upvotes: 0

shawty
shawty

Reputation: 5829

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.

Upvotes: 4

Related Questions