bootstrap4へ移行した際に詰まったところと解決策

# 注意事項
この記事は、単にうまくいった手法のみを紹介するのではなく、
筆者自身が詰まった状況を再現して、それを解決するにあたって行ったことについて書いています。
以上のことをご了承の上、本記事をご覧いただければ幸いです。

---
# 対象
- Railsチュートリアルを最後まで終えて、これから機能拡張を行おうと考えている方

# 環境
Railsチュートリアルの第14章終了時点と基本的には同じ

```:Railsチュートリアルとの差異
 ruby  (2.6.5)
 rails (5.2.4.2)
```

```:Before
 bootstrap-saas (3.4.1)
```
```:After
 bootstrap (4.4.1)
```

# 手順
## 1. bootstrap-saasを消す
### 1. 不要なgemをアンインストール

```:console
gem uninstall bootstrap-sass
```
### 2. Gemfileから削除
コメントアウトするか消しましょう

```:Gemfile
# gem "bootstrap-sass", ">= 3.4.1"
```
### 3. Gemfile.lockから削除

```:console
bundle update
```

>参考
>>[Qiita / @muran001 / 初心者は覚えておきたいRubygemsのコマンドまとめ](https://qiita.com/muran001/items/14f34b735e0a6b4af98c)
>>[Qiita / @katoy / gem をクリーンにする。](https://qiita.com/katoy/items/9bcba54b88c5fc7d9aa6)

## 2.bootstrapを導入する
### 1. Gemfileに追記
bootstrapのバージョンは記事投稿時の最新版を選択しています
また、jquery-railsも追記するように推奨している記事がありますが、Railsチュートリアルから何も触ってなければ、もともと導入されているのでここでは追記しません。

```:Gemfile
gem 'bootstrap', '~> 4.4.1'
```
### 2.Gemfileの更新を反映
どちらか選んで実行してください
Railsチュートリアルからの機能拡張をしているなら下を選んでください

```:console
bundle install
bundle install --without production
```
### 3. sprockets-railsのバージョンを確認

```:console
bundle show |fgrep sprockets-rails
```
### 4. application.scssを作成
＊作成と言っていますが、実際はapplication.cssをリネームしています。

```:console
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```
### 5. bootstrapをimportさせる
もともと書いてあったものを、下のコードで置換する。

```:app/assets/stylesheets/application.scss
@import "bootstrap";
```
### 6. bootstrapと依存関係にあるものを追記
追記後のファイルはこちらになります。

```:app/assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require jquery
//= require bootstrap
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .
```

> 参考
>> [github / bootstrap-rubygem](https://github.com/twbs/bootstrap-rubygem)
>> [Qiita / @NaokiIshimura / Railsアプリで Bootstrap 4 を利用する](https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf)

---
# 詰まったことリスト
## 1. application.scssを読み込んでくれない
application.cssの拡張子を変更したため、プリコンパイルの対象から外れたため、読み込まれなくなった。
そこで、プリコンパイルの対象に拡張子がscssのファイルも対象になるように変更した。

```:config/initializers/assets.rb
Rails.application.config.assets.precompile += ['.js', '.scss'] 
```
## 2. custom.scssを読み込んでくれない
application.scssを確認すると、custom.scssをimportするようなコードを書いていないことに気づく。

```:app/assets/stylesheets/application.scss
@import "custom";
@import "bootstrap";
```
独自に作成したscssファイルを読み込ませたければ、
__`必ず、@import "bootstrap";の前に書くこと`__
> 参考
>> [github / bootstrap-rubygem](https://github.com/twbs/bootstrap-rubygem)

## 3. Undefined variable: "$gray-light".

代わりにrgbaを使用した。

```:app/assets/stylesheets/custom.scss
/*変更前*/
$gray-light
/*変更後*/
rgba(#d3d3d3,1.0)
```
rgbaの書き方、およびカラーコードについて詳細に知りたい方は以下のリンクから確認してください。
> 参考
>> [CSS3リファレンス / rgba()](http://www.htmq.com/css3/rgba.shtml)
>> [原色大辞典](https://www.colordic.org/)

## 4. navbarがうまく反映されていない
Bootstrap4移行ガイドによると、Bootstrapのバージョンアップに伴ってNavbarの利用方法が変更されているため、bootstrap3では正常に適用されていたでも書き直す必要があることが分かった。
下記リンク先を参考に書き換えを行った。

> 参考
>> [Bootstrap4移行ガイド](https://cccabinet.jpn.org/bootstrap4/)
>> [Bootstrap / Navbar](https://getbootstrap.jp/docs/4.4/components/navbar/)

## 5. headerの上端に空白ができる
Chormeのデベロッパーツールを用いてheader上部の空白を調べた所、custom.scssのbodyが関係していることが分かった。
そこで、bodyのpadding-topの値を変更した。

```:app/assets/stylesheets/custom.scss
body {
  /*変更前*/
  padding-top: 60px;
  /*変更後*/
  padding-top: 0px;
}
```