Rails 6 に Bootstrap3 導入

1. yarn で Bootstrap と jquery を導入する

$ yarn add bootstrap-sass jquery

2. app/config/webpack/environment.js に jquery が使えるように設定追加

app/config/webpack/environment.js

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

const webpack = require('webpack')
environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

module.exports = environment

3. app/javascript/packs/application.js に 以下追記

app/javascript/packs/application.js

import '../javascripts/application.js'
import '../stylesheets/application.scss'

4. app/javascript/stylesheets/application.scss に以下追記

app/javascript/stylesheets/application.scss

// bootstrap-sass 内部で 相対パスを解決できないため、パス変数を差し替え
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";

@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss"

5. app/javascript/javascripts/application.js に以下追記

app/javascript/javascripts/application.js

import 'bootstrap-sass';