npmでfont-awesomeを導入したが、良く分からない苦戦をした…

rails

2018.03.18

font-awesomeのiconを使いたいと思い、

yarn add font-awesome

をした。

そして、application.scssに以下2行を追加。

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

でも、ブラウザで見るとiconが出ない。
さてどうしたものかと、色々試していって、webpack使ってるからfont-awesome-webpackというパッケージを追加して、webpackのenvironment.jsに

module: {
    rules: [
        { test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' },
        { test: /\.(ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: "file-loader" }
    ]
}

を追加したけど、やっぱり出ない。
ブラウザのconsoleを見ると

Failed to decode downloaded font〜
OTS parsing error〜

ってエラーがfontの数だけ出てる。
調べると、fontがgit登録される際にファイルが壊れるから出ると言うのを見かけて、.gitattributesに

*.otf binary
*.eot binary
*.svg binary
*.ttf binary
*.woff binary
*.woff2 binary

を追加してみたが変化無し。
良く考えなくても、node_modules以下はgit管理してないんだから関係無いじゃんと後で気付く。

だんだん諦めの心境になってきて、最後にもう一回最初から手順を繰り返してみようと、

・webpackの設定ファイルを元に戻す
・application.scssを元に戻す
・yarnで追加したfont-awesomeとfont-awesome-webpackを一旦remove
・再度font-awesomeだけを追加
・application.scssに上で書いた物を再度追加

してみたところ、なぜかiconが表示された…。

2日間ほどこれにハマっていたのに、一体何が原因だったんだ…。
こういうのマジで止めて欲しいけど、きっと何か自分に原因があったんだろうな…。