PenAndPapers PenAndPapers - 1 year ago 92
Sass (Sass) Question

How to add font awesome from node_modules directory using webpack

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.

Answer Source

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]',
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download