Skip to main content

twitter-bootstrap-railsからbootstrapに移行した


実はデザイナなマスタカです
今回は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

関連記事:

Pocket