Rails6でBootstrapを使う

はじめに

構築で少し迷ったので備忘録
Rails6にbootstrap 5系と4系それぞれの導入方法を記載します。

環境

M1 Mac
VScode
ruby 3.1.0
rails 6.0.4.7

注意点

bootstrapのversion違いで動かないケースがある
5系と4系ではsetupの仕方が若干違うので、installするversionに合わせて構築する必要がある。

エラーが出力されずbootstrapが動かない原因の多くは、bootstrapのversionと設定が噛み合っていないから

installしたのは5系だが、4系を前提とした設定をしているなど

bootstrap version 5系

5系はjqueryが必要なくなりました

terminalで下記を実行

# 2022.03/10　時点では5系のbootstrapがinstallされる
# versionの指定は記事下部を参照
$ yarn add bootstrap@next
$ yarn add @popperjs/core

$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss

ファイルに設定を追加

application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

app/javascript/stylesheets/application.scss

@import "~bootstrap/scss/bootstrap.scss";

app/javascript/packs/application.js

import "bootstrap";
import "../stylesheets/application.scss";

bootstrap version 4系

terminalで実行

yarn add jquery bootstrap@4.5.3 popper.js
mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss

ファイルに設定を追加

app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

app/javascript/packs/application.js

import 'bootstrap';
import '../stylesheets/application';

config/webpack/environment.js

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

特定のversionをインストールする方法

yarn add bootstrapした際はgemfileをみてどのversionをインストールしたのか確認すると良い

# 4.5.3をインストールする
yarn add bootstrap@4.5.3

終わりに

versionの違いで躓く経験をたくさんしました。
minemagic Psych Bootstrap
中でもminemagicは沼った。

こういったversion問題に揉まれて慣れていくんだろうなぁ
minemagicさん私を強くしてくれてありがとう
minemagicさんはライセンス問題だけど

参考

5系

4系