Railsアプリに”Bootstrap 4″を導入する【Ruby on Rails】

はじめに

Railsアプリケーション作成において、とっても便利なBootstrap。

少し前まで Bootstrap3 を利用していましたが、今回 Bootstrap4 を導入してみたのでまとめておきます。

なお、一応 scaffold で作成したシンプルなアプリに導入します。

とりあえず超簡単なアプリを作ってみる【Ruby on Rails】

環境

  • Windows Subsystem for Linux (Ubuntu 18.04)
  • Rails 5.2.0
  • Ruby 2.5.3

必要な知識・準備

  • Linuxの超基本的なコマンド(cd, mkdirなど)を知っているもしくは調べて理解できること。
  • rubyの導入が終わっていること。

導入手順

  • STEP.1
    gemをbundle installする
    上記のgemをbundle installします。

    また、sprockets-railsの バージョンがv.2.3.2. 以上でなくてはならないらしいのでチェック しておきましょう。
    (以下のコマンドで確認できます)

    今回は* sprockets-rails (3.2.1)と返ってきました。古いアプリでなければ大丈夫でしょう。

  • STEP.2
    application.cssをリネームする

    app/assets/stylesheets/application.cssapplication.css.scssにリネーム(名前の変更)しましょう。

    要は後ろに.scssを付け足すだけです。

  • STEP.3
    application.css.scssを書き換える
    もともといろいろ書いてあるやつは消してこれ1行でOKです。

  • STEP.4
    app/assets/javascripts/application.js に追記する
    こちらはもとから書いてあるやつは何も触らず、その下に↑の3行を追記します。

  • STEP.5
    railsアプリを再起動する
    assetsディレクトリ以下をいじっているので反映には再起動が必要です。

    再起動忘れて悩むのはあるあるでした…。

  • STEP.6
    Bootstrap4のクラスが反映されるかチェックする
    私の場合はだいたいbtn btn-successあたりでちゃんと反映されることをチェックしてます。

    もちろん何でも良いです。

    ↑の場合反映されていればこんなかんじ↓

    MEMO

    Bootstrap3 では使えていたのに Bootstrap4 では使えなくなっている(なくなっている)クラスもたくさんあります。

    とくにボタンのbtn-defaultというのも無くなっていて、もともとコレが反映されるかどうかでチェックしていた私はずいぶん悩まされましたw

    他にもたくさんのクラスに変更が加わっているので『おわりに』で紹介している公式ドキュメントをよくチェックしましょう。

  • 完成!

おわりに

今回は Bootstrap4 の導入手順をシンプルにまとめました。

初学者にはとてもありがたいBootstrap、ぜひ導入してその恩恵にあずかりましょう。

参考 Bootstrap4移行ガイド

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください