1　BootstrapをWebpackerで導入

まずはconsoleで

gem 'webpacker', '~> 4.0'

をやりますが、先ほど説明した通り、Rails5.1以降標準でサポートされているため、デフォルトでGemが追加されています。

それではGemfileにwebpackerというgemがあることを確認できたらjQueryとBootstrapを導入します。

yarn add jquery bootstrap popper.js

次にconfig/webpack/environment.js に以下のコードを追加してください。

const { environment } = require('@rails/webpacker')

module.exports = environment

  const webpack = require('webpack')
  environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      Popper: ['popper.js', 'default']
    })
  )

2 Bootstrapのstyleをimport

次に、app/javascript/stylesheets/application.scssにBootstrapのstyleをimportする記述を追記します。
このapp/javascript/stylesheetsディレクトリ及び、app/javascript/stylesheets/application.scssファイルは存在しないので以下のコマンドで作成します。

mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss

作成したら、app/javascript/stylesheets/application.scssファイルに以下のコードを追加してください。

@import '~bootstrap/scss/bootstrap';

3 application.jsにコードを追加

yarn でインストールしたBootstrapのパッケージを利用できるようにimportします。

次にapp/javascript/packs/application.js に以下のコードを追加してください。

  import 'bootstrap';
  import '../stylesheets/application';

4 レイアウトに stylesheet_pack_tag を追加

app/views/layouts/application.html.erb に以下のコードを追加してください。

<!DOCTYPE html>
<html>
  <head>
    <title>Kanban</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

    <%# ここに追加する %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

  <body>
    <%= yield %>
  </body>
</html>

以上がBootstrapの導入法です！

Bootstrapの導入

1 BootstrapをWebpackerで導入

2 Bootstrapのstyleをimport

3 application.jsにコードを追加

4 レイアウトに stylesheet_pack_tag を追加

1　BootstrapをWebpackerで導入