Railsでfont-awesome導入時のapplication.scssの書き換え

Ruby on Rails でfont-awesome-sassの導入をしました。初心者の私はエラー続出。ということで今回の作業と発生したエラー、そして解決方法を書きました。

ソースコードについての初記事です。レベルが低いことは重々承知ですが、辿ってきた足跡を残すため、そして同じような初学者のお役に立てたらと思い少しずつしたためていきます。

間違っていることや気になる点がありましたらぜひご指摘いただけると幸いです。

作業内容

1. font-awesome-sassの導入

2. application.cssをapplication.scssに書き換え

3. application.scssにfont-awesome読み込みの記述を追加

発生した問題

1. font-awesome-sassがインストールできない

2. application.scssへfont-awesomeの読み込みがうまくいかない

実際の作業と解決への手順

1. font-awesome-sassがインストールできない
Railsにfont-awesome-sassを導入するため、gemに以下の記述を追加し、bundle installを実行。

gem 'font-awesome-sass'

bundle installが途中で停止しinstall失敗。調べたところ、古いバージョンであればインストールできる場合があるとのこと。

（参照：CentOS6でfont-awesome-sassがインストールできない問題を解決

というわけで今度はgemに以下を記述して再度bundle install。

gem 'font-awesome-sass', '< 5.0.13'

今度は無事インストールできました。しかしこれでエラーってことはみんなどうやって新しいバージョンのfont-awesom-sassを使っているのでしょう？素人にはわからん・・・。

2. font-awesome-sassの読み込み
font-awesome-sassをインストールしたので、app/assets/stylesheets 以下のcssファイルの拡張子をscssへ修正。

そして、application.scss の最下段に以下を記入し、font-awesome-scssを読み込ませました。

*= require_tree .
 *= require_self
 */
 @import 'font-awesome-sprockets';
 @import 'font-awesome';

scssにプラグインを書き加える場合は上記のようにしなければいけないのを、下記のようにしてしまったミスでした。（参照：application.scssにrequireなんちゃらを記述する際にエラーが出てしまった場合の解決方法、
application.scssにrequireなんちゃらを記述する際にエラーが出てしまった場合の解決方法 - Qiita
）

 * 
 * 
 *= require font-awesome-sass
 * = require font-awesome-sprockets
 *= require_tree .
 *= require_self
 */

ひとまずこれでfont-awsome-sassを導入することができました。

川原さんぽ紀行