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

#目的
Rails5(5.2)に
[Bootstrap4](https://getbootstrap.com/) (2019/5/13現在 latest ver.4.3.1)
[Bootswatch](https://bootswatch.com/) (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 を利用する](https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf)を参考に

###Gemfileに以下を追加

```sh: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
```
なんかを全て削除し、

```scss:application.scss
@import "bootstrap";
@import "*"; // これが無いとstylesheets内に個別のscssを読み込めない
```
を追加する

##homeのコントローラーを作成。indexのviewを作成する
bootstrapの体裁確認のため、view/home/index.html.erbを生成する

```sh:
$ rails g controller home index
```
##config/routes.rbを編集し、ルーティングの設定

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

```rb:config/routes.rb
#get 'home/index'
root 'home#index'
```
に書き換える。

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

```html: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が適用されている。
![no_bootswatch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/aee69103-b719-df55-c066-5eef0c6b53b0.png)

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

```rb:Gemfile
#bootswatch
gem "bootswatch", github: "thomaspark/bootswatch"
```
上記を追加しbundle

```sh:
bundle
```

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

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

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

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

yetiが適用された！
![bootswatch_yeti.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/805b4de8-0f6b-e0a6-c547-3ddec02e587a.png)

#####darklyを適用させてみる。

```scss:application.scss
// ここからbootswatchのテーマ
@import "darkly/variables";
@import "bootstrap";
@import "darkly/bootswatch";
@import "*"; // これが無いとstylesheets内に個別のscssを読み込めない
```
ん～～～渋い。
![bootswatch_darky.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/77ee419c-ce22-e7fb-db6c-33ef13d51c6d.png)

####minty
ギャルい!
![bootswatch_minty.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/26e2312a-5b53-e072-d795-03156c0b1e85.png)