rails6にbootstrapを導入する方法

はじめに

Rails6系からは「yarn + webpacker」でBootstrapを導入するのが標準のようなので、こちらの方法で導入していいきます。

設定方法

まずはwebpackerをインストールします。

$ rails webpacker:install 

...
Webpacker successfully installed

続いて、yarnでbootstrapに必要なパッケージをインストールします。

$ yarn add jquery bootstrap popper.js

先程インストールしたパッケージをインポートします。

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

※stylesheetsフォルダとapplication.scssファイルを新しく作成します。

@import '~bootstrap/scss/bootstrap';

続いて、jQueryとPopper.jsを利用できるようにするために、下記コードを追加します。

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

// ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)
// ここまで

module.exports = environment

レイアウトファイルのstylesheet_link_tagの部分を下記のように変更します。

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

これで完了です！