Bootstrapの超簡単な導入をまとめた

自分用のメモとしてBootstrapの導入方法をここにまとめます。
ちなみに導入するBootstrapのVersionはBootstrap4です。

導入の手順

1. ターミナルでyarn add jquery bootstrap@4.5 popper.jsを実行
2. 「config/webpack/environment.js」に以下を記入
   config/webpack/environment.js

       :
       :#(省略)
       const webpack = require('webpack')
       environment.plugins.prepend(
         'Provide',
         new webpack.ProvidePlugin({
           $: 'jquery/src/jquery',
           jQuery: 'jquery/src/jquery',
           Popper: 'popper.js'
         })
       )
   

3. 「app/javascript/stylesheets/application.scss」に以下を記入
   app/javascript/stylesheets/application.scss

       @import '~bootstrap/scss/bootstrap';
   

4. 「app/javascript/packs/application.js」 に以下を記入
   app/javascript/packs/application.js

       :
       : //(省略)
       import "channels"
       
       import "jquery";
       import "popper.js";
       import "bootstrap";
       import "../stylesheets/application" 
       
       Rails.start()
       Turbolinks.start()
       ActiveStorage.start()
   

5. 「app/views/layouts/application.html.erb」を書き換え
   app/views/layouts/application.html.erb

      - <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     
      + <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   

以上の工程で導入できます。