How to add font awesome from node_modules directory using webpack

2
votes

I've installed font-awesome using npm install font-awesome --save-dev, and now Im having trouble including it on my project. Below are my code.

webpack.config.js

{
            test: /\.(svg|woff|woff2|ttf|eot|otf)$/,
            loader: 'file-loader?name=assets/[name].[ext]',
}

app.scss

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

Error

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 Module parse failed: /ProjectSite/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1) You may need an appropriate loader to handle this file type.

3
javascriptwebpacksassfrontendfont-awesome

3 Answers

5
votes

By reading doing some research I finally solved it by adding ([\?]?.*)$ on the regex part.

{
     test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
     loader: 'file-loader?name=assets/fonts/[name].[ext]',
}
1
votes

Have you installed the npm file-loader package?

npm install --save-dev file-loader

I have a webpack example repository in which I include font-awesome. It might help. You can find it here

0
votes

with new webpack versions you may wanna try

{
    test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
    use: [
        {
            loader: 'file-loader?name=assets/fonts/[name].[ext]'
        }
    ]
}