この記事は、Bootstrapのバージョン4についてのものです。Bootstrap 5を使うときは、Rails 6/7にjQueryとBootstrap 5を入れる（その1）をごらんください。
環境: Rails 6.0、Webpacker 4.2
Rails 6にjQueryとBootstrapを入れて、どこからでも使えるようにしたい。Webpackerで入れる方法と、昔ながらのassetsを使う方法があります。
Webpackerで入れる場合
yarn addでjQueryとBootstrapを加えます。Bootstrapが使用するpopper.jsも入れます。
$ yarn add jquery bootstrap popper.js
webpackの設定でProvidePluginを加えると、importやrequireなしで$やBootstrapのJavaScriptが使えるようになります。
const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
// Vue.js フル版（Compiler入り）
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' }
// ここから
// jQueryとBootstapのJSを使えるように
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js'
})
)
// ここまで
module.exports = environment
app/javascriptディレクトリの下にstylesheetsディレクトリを作り、application.scssを次のように記述します。
@import '~bootstrap/scss/bootstrap';
application.jsに次の2行を加えます。
import 'bootstrap';
import '../stylesheets/application';
レイアウトにstylesheet_pack_tagを加えます。
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
assetsに入れる場合
2020-03-01 追記: manifest.js の設定を追加。
2019-12-10 追記: config/environments/production.rb の設定を追加。
昔ながらのassetsに入れる方法もあります。こちらのほうが開発時のコンパイルが速いような気がします。
まず、GemfileにRails 6で削除されたgemとBootstrapのgemを入れます。
（私の環境では sassc のバージョン2.1 - 2.2ではライブラリのロードエラーが出ていたので、バージョンを2.0に固定していました。2.3ではエラーが出なくなったので gem 'sassc' は取りました。）
- gem 'sassc', '~> 2.0.0'
gem 'uglifier'
gem 'jquery-rails'
gem 'bootstrap'
config/environments/production.rbに設定を追加し、本番環境ではJSファイルが圧縮されるようにします。
config.assets.js_compressor = :uglifier
assetsの下にjavascriptsディレクトリを作り、application.jsを新規作成して、jQueryとBootstrapのJavaScriptを入れます（これ以外のJavaScriptはapp/javascriptのほうに置くなら、require_treeの行は要りません）。
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
sass-railsのバージョンを6に上げたときは、assets/config/manifest.jsに //= link_directory ../javascripts .js の行が必要になります。
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
stylesheetsの下のapplication.cssをapplication.scssにリネームして、Bootstrapのスタイルシートを読み込ませます。
@import "bootstrap";
あるいは、scssファイルを別に作ってapplication.cssで指定します（ファイル名をbootstrap.scssにするとエラーになります）。
@import "bootstrap";
/*
*= ./bootstrap_import
*= require_tree .
*= require_self
*/
レイアウトにjavascript_include_tagを加えます。
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
これで、app/assetsでもapp/javascriptでも好きなところで$を使ったりBootstrapを使ったりできます。