bootstrap3から4への移行方法について (Rails5)

今回はbootstrapのバージョン変更について書いていきたいと思います。

経緯はこうです。ポートフォリオ製作の中、週一の専用メンタリングがあり時間もわずかのところでメンターの方から

　

『あれ？bootstrapは３を使ってるんですね！』

　

な、なんだ！？　教材を参考にして制作を進めてるからそもそもバージョンにこだわりがなくてbootstrap3になっていたわけだが何かまずいのかな？と聞いてみると

　

『今はbootstrap4が主流ですね。特にこだわりがなければ新しいのを使った方がいいですよー。あとは今であれば困ったときにbootstrap4の方が似たようなケースも多いと思うので解決しやすいですよ！！』

なるほど。そしたらどうせ今後も使う機会もあると思うので新しいbootstrap4にバージョンを変更しよう！！

と意気込み、以下の記事を参考にしながらやってみました。

https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf

なんだー簡単じゃんと思い　いざアプリを立ち上げると

　

　

全然導入できねえ

　

こんなにバージョン更新が難しいとは。。。

やったこと

gemfile中に以下を記述しbundle install

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'  

sprockets-railsがv2.3.2.以上である必要があるらしいので以下コードでバージョン確認

$ bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.1) 問題なし

app/assets/stylesheets/application.scssの中に@import "bootstrap";があることを確認。またファイル名がcssのままだとよくないのでscssに変えておく
ここも今までのbootstrap3導入まででやっていたことなので問題なし。

　

ブートストラップJavaScriptはjQueryに依存しています。Rails 5.1以降を使用している場合は、jquery-railsgemをGemfileに追加します。

gem ' jquery-rails '　ここもbootstrap3導入まででやっていたことなので問題なし。

application.jsに以下を記述する。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

rails s を再度して立ち上げる

エラー発生

内容をググりながらみていくと
Sass::SyntaxError in Pages#index
シンタックスエラーなのでコンパイルがうまくいってないのかな？

念のため他のページで読み込んでみるも特にエラー内容は変わらず

File to import not found or unreadable: bootstrap-sprockets.
この一行で検索をかけると

http://geekday.hatenablog.com/entry/2017/03/31/021052

同じような境遇の方がいたので早速みてみるも解決せず
タイポもなさそうだしバンドルインストール後railsサーバー再起動するも変わらずエラー

https://github.com/twbs/bootstrap-rubygem

bootstrap4の公式手順を見るも特にやってないことはないんだけどなあと途方に暮れました。まじで

　

　ここから解決方法！！！

というわけでメンターの方に助けを求めると

まずGemファイル内のgem 'bootstrap-sass'を削除した方がいいと
これはbootstrap3を導入するときの記述なので本質的なエラーとは関係ないかもしれないが余計な影響があるかもしれない

　

このエラー画像の下の赤いラインなんですが

@import "bootstrap-sprockets";

app/assets/stylesheets/application.scssの中にbootstrap3の名残で書いていたのですが、これがそもそもbootstrap4では必要がないらしいです　なのでこれを削除

@import "bootstrap-sprockets"; File to import not found or unreadable: bootstrap-sprockets.とエラーメッセージが出ているのでこちらのファイルがないのに読み込みにいってます。 なので余談ですがapp/assets/stylesheets/application.scssの中に適当なファイル名を追記すると同じエラーが出ました。（@import "aaaaa";実際にこんなファイルはないので読み込めないですと表示されます)　

再度railsサーバー再起動すると無事に表示！！
３から４に変えたことでデザインは崩れていましたが。

そもそも

　いやーここまで長かった。スタックオーバーフロウの英語の記事もGoogle先生に翻訳してもらいながら他の関係ありそうな記事を何件も読み半日以上格闘してました。
今回も残念ながら一人での解決はできませんでしたが惜しいところまで来ていたかと思います。

　

今後のエラー解決方法としては

バージョンを変える場合は以前のバージョンと更新したいバージョンの公式説明を読んでみる
これに関しては４の導入説明は読んでいたけど３の導入説明は探していなかったので３の記事を読んでいたら導入方法の違いがわかってもしかしたら解決できたかもしれません。更新手順を進める前にgitにpushしてからいろいろ変更しても大丈夫なようにすれば気軽に怪しい場所を削除して解決できるかなと思いました。

　

ニッチではありますが同じ境遇で同じエラーで困っている方は是非参考にしてください。