Rails5にBootstrap4.3とBootswatchを適用させる

目的

Rails5(5.2)に
Bootstrap4 (2019/5/13現在 latest ver.4.3.1)
Bootswatch (2019/5/13現在 Bootstrap ver.4.3.1に対応)
を適用させ、viewの見た目をいい感じにする。

環境

macOS Mojave(10.14.4)
Rails5.2.3
Ruby2.5.1(rbenv)
Railsはnewまで済んでいて、rails sで確認できる状態

Bootstrap

Railsアプリで Bootstrap 4 を利用するを参考に

Gemfileに以下を追加

Gemfile

#bootstrap
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'

application.jsに以下を追加

app/assets/javascripts/application.js

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

application.scss

app/assets/stylesheets/application.cssをapplication.scssにリネーム
元々のcssにある

*= require_tree .
*= require_self

なんかを全て削除し、

application.scss

@import "bootstrap";
@import "*"; // これが無いとstylesheets内に個別のscssを読み込めない

を追加する

homeのコントローラーを作成。indexのviewを作成する

bootstrapの体裁確認のため、view/home/index.html.erbを生成する

$ rails g controller home index

config/routes.rbを編集し、ルーティングの設定

「#get 'home/index'」をコメントアウトし「root 'home#index'」を設定

config/routes.rb

#get 'home/index'
root 'home#index'

に書き換える。

以下をindex.html.erbに貼り付ける

index.html.erb

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarColor01">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

ここまでで一旦体裁の確認

rails s

Pumaを起動して、以下のようになっていたらBootstrap4が適用されている。

Bootswatchの適用

Gemfileに以下を追加
※必ず「github: "thomaspark/bootswatch"」を追加すること！

Gemfile

#bootswatch
gem "bootswatch", github: "thomaspark/bootswatch"

上記を追加しbundle

bundle

次に「config/initializers」以下にbootswatch.rbファイルを追加し、
bootswatchをロードさせる。

bootswatch.rb

Rails.application.config.assets.paths += Gem.loaded_specs["bootswatch"].load_paths

テーマを指定する

app/assets/stylesheets/application.scssにBootswatchのテーマ名を追加する。
ここでは「yeti」を設定する。
他の体裁はBootswatchを参照のこと。
ここで気をつけるのは
1.bootstrapのimport前に「テーマ名/variables」
2.「bootstrap」をimportした後に「テーマ名/bootswatch」
以下のようになる。

application.scss

// ここからbootswatchのテーマ
@import "yeti/variables";
@import "bootstrap";
@import "yeti/bootswatch";
@import "*"; // これが無いとstylesheets内に個別のscssを読み込めない

yetiが適用された！

darklyを適用させてみる。

application.scss

// ここからbootswatchのテーマ
@import "darkly/variables";
@import "bootstrap";
@import "darkly/bootswatch";
@import "*"; // これが無いとstylesheets内に個別のscssを読み込めない

ん～～～渋い。

minty

ギャルい!