1
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

webpackにfont-awesomeを読み込ませる

webpackにfont-awesomeを読み込ませる方法を調べたところ、以下の3つの方法がありました。
最初の方法が一番良さそうですが、今回はフロントエンドに疎く簡単な一番最後の方法を採用しました。

webpack.config.jsにfont-awesomeの設定を記載する

こちらのgistを参考にすると良さそうです。gistが長いためURLのみ載せます。

Justineo/vue-awesome

以下のようにコンポーネントのようなイメージでfont-awesomeを利用できるモジュールです。
ただ、今回の場合は既存のソースで fa-xx などが少なからずあることから、書き換えコストを考えて採用しませんでした。

<!-- basic -->
<icon name="beer"></icon>

<!-- with options -->
<icon name="refresh" scale="2" spin></icon>
<icon name="comment" flip="horizontal"></icon>
<icon name="code-fork" label="Forked Repository"></icon>

<!-- stacked icons -->
<icon label="No Photos">
  <icon name="camera"></icon>
  <icon name="ban" scale="2" class="alert"></icon>
</icon>

gowravshekar/font-awesome-webpack

betaということとあまりメンテされてないため積極的に導入したくないですが、今回はこちらを利用してみました。
モジュールの内容としては1.の方法を隠蔽してくれているようなモジュールだと思います。

font-awsomeを利用するために必要なのは次の2つの作業だけです。

npm install --save font-awesome font-awesome-webpack url-loader

url-loaderをインストールしていないと npm run dev の際に以下のエラーがはかれるため先に入れておきます。

ERROR in ./~/font-awesome-webpack/~/css-loader!./~/less-loader!./~/font-awesome-webpack/font-awesome-styles.loader.js!./~/font-awesome-webpack/font-awesome.config.js
Module not found: Error: Cannot resolve module 'url-loader' in /app/web/node_modules/font-awesome-webpack

次にwebpack.config.jsを修正したらおしまいです。

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  }
};

元記事

webpackにfont-awesomeを読み込ませる

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?