Rails6(Ruby on Rails6) にBootstrapをWebpackerを使って導入する方法

2021年、すでにRails6が到来したにも関わらず、まだ出版される書籍にはRails4を前提にアプリ開発方法を教えている。その結果、自分のPC環境（Rails6）では書籍の説明通りにはいかず、エラーが時々発生していて、その中の一つ、Bootstrapと取り入れる方法に挫折を味わったが、複数回の試しにより得た解決方法をここにまとめておく。

環境の整理

• 開発環境：Windows10 Home　64ビットオペレーティングシステム、x64ベースプロセッサ
• Rails version 6系（Rails 6.1.3.2）

環境の構築

1. フォルダを作成（今回例：test_bootstrap）

2. フォルダをルートディレクトリに指定、そのあとbundle init

3. Gemfileを編集（gem "rails"のコメントアウトを外す）

4. bundle config set path vendor/bundle

5. bundle install

6. bundle exec rails new . -d postgresql -f

7. config/database.ymlを以下のように設定する（postgresql）
   
   *設定しないと、ActiveRecord::ConnectionNotEstablished エラとなる
   

8. rails db:create

9. rails s

10. 以下までは完了
    

動作確認用のファイルを用意

1. rails g controller home index
   確認用のページ（コントローラ：home, アクションメソッド：index）を作成
   

2. ブラウザでルートにアクセスした際に、home#indexを表示するよう、config/routes.rbを編集
   

3. app\views\home\index.html.erb にBootstrapのclassを指定する
   

4. rails s ブラウザで確認（現在：黒色の文字列、期待値：赤色の文字列）
   

Bootstrapの導入

1. WebpakerでjQueryとpopper.jsというパッケージをインストール
   yarn add jquery popper.js bootstrap

2. config\webpack\environment.js を以下のように変更
   

3. app\javascript\packs\application.js にて、以下１行を追加

app\javascript\packs\application.js

import 'bootstrap'

＊追加後

1. app\assets\stylesheets\application.css をapp\assets\stylesheets\application.scss にファイル拡張子を変更
2. app\assets\stylesheets\application.scss にて、以下１行を追加

app\assets\stylesheets\application.scss

 *= require bootstrap/dist/css/bootstrap.min.css

＊追加後

6. rails s ブラウザで確認（期待値：赤色の文字列 となった。OK）

• ちなみに、app\views\layouts\application.html.erb　では一切変更を加えていない。
• 他にpopper 問題のようだったら、https://qiita.com/oreo3@github/items/2167a9ee08b2cf00cb4b　参照するがよい。