Rails6 Bootstrap 導入 (docker)

#Rails6 Bootstrap 導入 (docker)

いくつかの記事を渡り歩かなきゃいけなくて時間かかったのでまとめておく
(Rails6からはjavascriptsフォルダが作られず、webpackが標準になったことでディレクトリ構造がRails6以前と違い、混乱した)

Rails 6.1.4
ruby 2.6.8p205 (2021-07-07 revision 67951) [x86_64-linux]
Docker version 20.10.5, build 55c4c88

##①
app/javascript/src/application.scss 作成

app/javascript/src/application.scss

@import '~bootstrap/scss/bootstrap'; //追加

##②

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
//追加（ここから）---------------------
import "jquery"
import "bootstrap"
import "../src/application"
//追加(ここまで)---------------------
Rails.start()
Turbolinks.start()
ActiveStorage.start()

##③

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
//追加（ここから）---------------------
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
//追加(ここまで)---------------------
module.exports = environment

---

###ファイルの作成と修正は　これで完了

docker-compose run --rm web bash　実行

yarn add jquery bootstrap popper.js @popperjs/core 実行

これでdockerコンテナ再起動すればいける