実はデザイナなマスタカです
今回はrailsのbootstarap4対応をした話
過去の負債から乗り換えました
・github
twitter-bootstrap-rails
https://github.com/seyhunak/twitter-bootstrap-rails
bootstrap
https://github.com/twbs/bootstrap-rubygem
・移行理由
twitter-bootstrap-railsを最新バージョンにしても
bootstarapが2系なことに気づいたので移行することにした
・Gemfile
twitter-bootstrap-railsはLESSで
bootstrapはSCSS
なので関連するGemも置き換え
mini_racerはtherubyracerのjsエンジンの後継らしい
+gem 'sass-rails', '~> 6.0.0' +gem 'bootstrap', '~> 4.4.1' +gem 'mini_racer' -gem 'less-rails' -gem 'twitter-bootstrap-rails', '4.0.0' -gem 'therubyracer', '0.12.3'
・CSSのファイル名変更
hogehoge.css.less
を
hogehoge.css.scss
に変更
・application.jsを変更
application.jsを以下に変更
//= require jquery3 //= require popper //= require bootstrap-sprockets
・application.css.scss
application.css.scssを以下に変更
- *= require_self - *= require_tree . +@import "bootstrap"; +@import "./自分のファイル";
・ExecJSのエラー
以下のエラーが出た場合
ExecJS::RubyRacerRuntime is not supported. Please replace therubyracer with mini_racer in your Gemfile or use Node.js as ExecJS runtime.
Gemfileのtherubyracerをmini_racerに変更してください
・SASSのエラー
cannot load such file — sass
このエラーが出たらapacheやWEBrickを再起動してください
・kaminari
bootstrap2から4に上げるとkaminariの表示がおかしくなるので
ついでにkaminariもbootstrap対応したいと思うようになった
以下のコマンド実行すると
app/view/kaminari
にファイルが吐かれるので必要ならカスタマイズもできる
テーマはbootstrap以外にもgoogleとかgithubのテーマもある
rails g kaminari:views bootstrap4
https://github.com/kaminari/kaminari
・今後
この辺みながらぼちぼちテーマ当ててイケメンになります
https://getbootstrap.com/docs/4.1/components/alerts/
参考
https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf
https://qiita.com/flowerhill/items/b727f91fa5e2756cb046
https://railstutorial.jp/chapters/filling-in-the-layout?version=3.2