$ yarn add jquery bootstrap popper.js webpackの設定でProvidePluginを加えると、importやrequireなしで$やBootstrapのJavaScriptが使えるようになります。
config/webpack/environment.js
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)
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を次のように記述します。
app/javascript/stylesheets/application.scss @import '~bootstrap/scss/bootstrap'; application.jsに次の2行を加えます。
app/javascript/packs/application.js import 'bootstrap'; import '../stylesheets/application'; レイアウトにstylesheet_pack_tagを加えます。
app/views/layouts/application.html.erb <%= 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ではエラーが出なくなりました。）
Gemfile - gem 'sassc', '~> 2.0.0' gem 'uglifier' gem 'jquery-rails' gem 'bootstrap' config/environments/production.rbに設定を追加し、本番環境ではJSファイルが圧縮されるようにします。
config/environments/production.rb config.assets.js_compressor = :uglifier assetsの下にjavascriptsディレクトリを作り、application.jsを新規作成して、jQueryとBootstrapのJavaScriptを入れます（これ以外のJavaScriptはapp/javascriptのほうに置くなら、require_treeの行は要りません）。
app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .
sass-railsのバージョンを6に上げたときは、assets/config/manifest.jsに //= link_directory ../javascripts .js の行が必要になります。
app/assets/config/manifest.js //= link_tree ../images //= link_directory ../javascripts .js //= link_directory ../stylesheets .css stylesheetsの下のapplication.cssをapplication.scssにリネームして、Bootstrapのスタイルシートを読み込ませます。
app/assets/stylesheets/application.scss @import bootstrap; あるいは、scssファイルを別に作ってapplication.cssで指定します（ファイル名をbootstrap.scssにするとエラーになります）。