How can I make FontAwesome work with vue-cli webpack-simple template?

Question

I generate a default project with vue-cli:

vue init webpack-simple grid-prototype

I install FontAwesome through npm:

npm install --save fontawesome

After that, I include it into main.js with:

import 'font-awesome/css/font-awesome.css'

I execute the app with:

npm run dev

And I get this error:

Failed to compile.

./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.css 7:684-735
 @ ./node_modules/font-awesome/css/font-awesome.css
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js

Here's my webpack.config.js (it's the default one created by the cli):

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "build.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"]
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {}
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"
    },
    extensions: ["*", ".js", ".vue", ".json"]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: "#eval-source-map"
};

if (process.env.NODE_ENV === "production") {
  module.exports.devtool = "#source-map";
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]);
}

What am I doing wrong?

Well you need loader for font files - check this gist gist.github.com/Turbo87/e8e941e68308d3b40ef6 — Belmin Bedak
– Belmin Bedak, Commented Apr 5, 2018 at 9:56

Max Liashuk · Accepted Answer · 2018-04-05 09:56:37Z

2

webpack-simple is suitable for quick prototyping and it doesn't have advanced rules.

Solution #1: Use webpack template instead of webpack-simple to avoid this and other issues in the future.

Solution #2: Use FontAwesome from CDN, for example: https://www.bootstrapcdn.com/fontawesome/

I mean, just add the CDN css to your index.html

Solution #3: Add one more rule to your webpack config

module: {
  rules: [
   {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
      }
   }
 ]

As it is in the webpack template:

https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.base.conf.js

answered Apr 5, 2018 at 9:56

Max Liashuk

1,0537 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amedina Over a year ago

I'm trying #3, but it gives me an error saying utils is not defined. Where is it?

Max Liashuk Over a year ago

@amedina Investigate webpack template there is utils defined in another place

Collectives™ on Stack Overflow

How can I make FontAwesome work with vue-cli webpack-simple template?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related