RailsにBootstrap4を導入

巷ではBootstrapなんてソースコードが汚れるから使わない、ダサい…などという意見がtwitterなどを見ていると出てくるのですが、僕は気軽にレスポンシブデザインが初心者でも気軽に作成できるのでとても良いなぁと思っています笑
だって、ちゃんとしたレスポンシブやろうとしたらすごい大変、めちゃ時間かかる・・・
サーバーサイドでしっかりしたもの作っても見た目がしょぼいと自分のモチベーションも保てない人種もいます。(僕です。)
そういった方々のために導入についてまとめてみました。

目次

目的

Bootstrap4をお手軽に導入しよう。
今回の記事はこちらのQiitaも参考にしています。

Railsアプリで Bootstrap 4 を利用する
https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf

(前提、環境)

mac
macOS Mojave 10.14.5
ruby 2.5.1
rails 5.2.3

導入にあたり

Bootstrap公式
https://getbootstrap.com/
まずは公式ページをみてみましょう!
今回はRailsを使っているのでRubyGemsを参照しましたが、その他のフレームワークを使っている方は導入手順が異なるので注意してください!

bootstrap-rubygem
https://github.com/twbs/bootstrap-rubygem
Bootstrap公式にbootrstap4はこのgemを入れてねと書いてあったのでとりあえず読みましょう^^

bootstrap-rubygemの導入

gemfileに追記

gemfileに追記します。Rails 5.1以上を使っている人はjquery-railsも必要なので、合わせて記述します。

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

app/assets/stylesheets/application.cssをapplication.scssに名前を変更

cssではなく、scssを使いましょう!
そしてapplication.scssに追記します。

@import "bootstrap";

bundle install

bundle install

サーバーを立ち上げなおしてくださいね!
※どうやらsprockets-railsのバージョンが少なくとも2.3.2はないといけないようです。

application.jsに追記

Githubには上3行しか書いていないのですが、
//= require rails-ujs
//= require turbolinks
//= require_tree .
よりも上に記述しなければいけません。
※結構初心者がハマる沼。
ujsなどについては今度記事を書こうと思います笑

//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require turbolinks
//= require_tree .

結果

Bootstrap4が導入!!

終わりに

導入に関してはめちゃ簡単です。
でも細かなところで導入をミスるとイライラが募ってしまうので、備忘録として覚えておきましょう!

https://hirocorpblog.com/roadmap-engineer/

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!
目次
閉じる