おはこんばんにちは!ノボルです。
最近Railsチュートリアルに取り組んでいるのですが、
5章「レイアウトを作成する」の5.1.2 BootstrapとカスタムCSSで
Bootstrapがどうしても読み込めず躓いちゃいました。
QiitaやStack Overflowで紹介されている方法は全て試したのですが、
上手くいかず、結局エラーを解決するまで5日もかかりました。泣
teratailでさっさと聞けばよかったのですが、
どうしても自分で解決したくて粘りまくりました。笑
皆さんには僕のように時間を無駄にして欲しくないので、
この記事で対処法を一挙紹介します!
開発環境を変える
開発環境に何かしらの問題があり、読み込めない場合があるようです。
僕の場合、Cloud9→ローカル開発環境に変えたところ、
Bootstrapが上手く読み込めました!
Cloud9で上手くいかなかった理由についてですが、調べても特定できませんでした。
(すみません泣)
どなたか知っている方がいたら、シェアして頂けると幸いです!
Cloud9のインスタンス・rails serverを再起動
これもQiita、Stack Overflowで紹介されていたのですが、
Cloud9などのIDE(総合開発環境)を使っている方は、
インスタンスそのものを再起動することでBootstrapが読み込めることがあるようです。
インスタンス再起動のやり方については以下の記事が分かりやすいです!
https://naito-coding0322.hatenablog.com/entry/2018/10/01/140650
rails serverの再起動↓
1 2 3 |
$ rails server(sだけでも可) |
Gemfileとcustom.scssの記述を確認
当たり前ですが、Gemfileやcustom.scssの記述が間違っていたら、
Boostrapは読み込めません。
1 2 3 4 5 6 7 8 9 |
source 'https://rubygems.org' gem 'rails', '5.1.6' gem 'bootstrap-sass', '3.3.7' . . . |
1 2 3 4 |
@import "bootstrap-sprockets"; /* bootstrap-sprocketsを先に読み込む */ @import "bootstrap"; |
bundle installの実行
意外とbundle installをしてないのが原因だったりするようです。
もう既にやったという方も、念の為再度実行することをおすすめします。
1 2 3 |
$ bundle install |
Gemfileとapplication.jsに追記
Gemfileとapplication.jsに記述を加えることでエラーが解消したという報告もあります。
1 2 3 4 |
# 以下を追加 gem 'autoprefixer-rails' |
app/assets/javascripts/application.js↓
1 2 3 4 |
// 以下を追加 //= require bootstrap-sprockets |
追記後は、bundle installを忘れないように。
最後に
今回はrailsチュートリアル5章でBootstrapが読み込めないときの対処法をご紹介しました。
もし上記の方法を全て試しても解決しなかったという方は、
ググるか素直にteratailで質問しましょう笑
エラー解決は大変ですが、諦めず一緒にrailsチュートリアルを駆け抜けましょう!
コメント
Gemfileとapplication.jsに追記、を試したところ上手くいきました!!ありがとうございます…!
コメントありがとうございます。
よかったです!
エラーで引っかかることがあると思いますが、頑張ってください!