Rail6 + Bootstrap v5.0-beta3のメモ

環境

rails (6.1.3.1)
webpacker (5.2.1)
"bootstrap": "^5.0.0-beta3",

僕の場合

1. bootstrapはyarn(package.json)で管理
2. StylesheetはAssets pipelineに任せる
3. JavaScriptはWebpack(er)に任せる

手順

# 1.
$ yarn add bootstrap@next @popperjs/core

# 2. CSSをAssetPipelineにぶちこむ
$ vi config/initializer/assets.rb
# node_modulesがAssetの検索パスに入っているのを確認
Rails.application.config.assets.paths << Rails.root.join('node_modules')

# ここにファイル作ればデフォルトでapplication.cssで読み込まれる
$ vi app/assets/stylesheets/bootstrap_loader.scss
@import 'bootstrap/scss/bootstrap.scss';

# 3. JSをWebpackerでコンパイル
$ vi app/javascript/packs/application.js
import "bootstrap"

memo

• Webpacker v6からフォルダ構成変わるって聞いた気がするので要注意(要確認)
• CSS/SCSSもWebpackerにぶち込みたいけど現状コンパイルが都度走って遅いっぽい
  • 設定変更できないのか？