Ruby on Rails チュートリアル（第５章 レイアウトを作成する）の5.1.2 BootstrapとカスタムCSSでつまずいたので共有します。
多分もう少ししたらRails 5.1版のチュートリアルが作成されるとは思うんですが、その前に同じようにつまずいた人のために書いておきます。
参考にした記事たち
多分チュートリアルでつまずく人は、エラーが発生してそのまま闇に葬り去ってしまうからなんだろうな、と今回はじめてみて思いました。
一応参考にした記事をいくつか挙げておきます。
「RailsにBootstrapをカスタマイズ可能な形で導入する」
http://qiita.com/iguchi1124/items/e8aca47b111bb52f94a5
「Rails Bootstrap-Sassを導入する」
http://keruuweb.com/rails-bootstrap-sass%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B/
「Can't run bootsrap : couldn't find file 'bootstrap-sprockets' with type 'application/javascript'」
http://stackoverflow.com/questions/31371040/cant-run-bootsrap-couldnt-find-file-bootstrap-sprockets-with-type-applica
まあどれも僕のコードに適応してもダメだったんですけどね。
そもそも手順が足りない
チュートリアルのリスト 5.6: Bootstrap CSSを追加するまで終えた状態です。
足りない手順
- application.jsの編集
これですね。
僕の場合、何度やっても Sprockets::FileNotFound in StaticPages#homeが出ていて、bootstrapが読み込めていませんでした。
検索した結果、 application.jsに記述する手順が抜けている。
とある記事には、 //= require jqueryをいれなければダメですみたいなことが書いてあって、僕は正直に入れてやってみたんですが、 //= require jqueryでエラーが出ていたので、これは削除しました。
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require_tree
//= require bootstrap-sprockets
最後の一行( //= require bootstrap-sprockets)を追加する(だけだったと思う・・・)。
手順に逆らってみた
チュートリアルでは custom.scssを作成してやっていましたが、僕の場合は application.jsに編集を加えたので、 custom.scssは作成せずに、元からあった application.cssを編集しました。
application.cssを application.css.scssへリネームします。
@import "bootstrap-sprockets";
@import "bootstrap";
手順にあった custom.scssの中身をここへ記述。 bootstrap-sprocketsは bootstrapの上に記述しなければならない、らしいです。
無事解決
ちゃんと表示されました！
custom.scssを作成してから application.jsに変更を加える場合は、上に貼った記事を参考に application.cssにも変更が必要になると思います。
僕の場合それが面倒臭かったので、直接application.cssをかきかえました。
参考にしてみてください。
追記
application.cssを書き換えずともcustom.scssを作成してapplication.jsに変更を加えて上の画面が表示されました。
なので、チュートリアルのリスト 5.6: Bootstrap CSSを追加するまで終えた状態で、application.jsに変更を加えれば無事解決します。