rails6にbootstrapを導入する方法

目次

①Bootstrapのパッケージをインストールする
②Bootstrapを利用できるようにする
③jQueryとPopper.jsを利用できるようにする
④レイアウトを修正する

①Bootstrapのパッケージをインストールする

ターミナル上で以下のコマンドを実行する
※bootstrapとjQueryとpopper.jsをインストールしている

yarn add jquery bootstrap popper.js

②Bootstrapを利用できるようにする

yarnでインストールしたbootstrapのパッケージを利用できるようにするために、
app/javascript/packs/application.js に以下のコードを追加する。

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

app/javascript/stylesheets/application.scssに以下のコードを追加する。

@import '~bootstrap/scss/bootstrap';

③jQueryとPopper.jsを利用できるようにする

app/config/webpack/environment.js を修正し、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

④レイアウトを修正する

app/views/layouts/application.erb.html の「stylesheet_link_tag」を「stylesheet_pack_tag」に変更する。

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