rails6 bootstrap5導入方法

#はじめに

railsチュートリアルを進めるに当たってbootstrap3を導入することがあるのですが、２周目でローカル環境で進めていることもあり、bootstrap5を使用してみようと思い、導入できるようになるまでの備忘録です。
詳しいことは分かりませんが色々な記事を参照して自分にできそうな方法で導入しました。

railsチュートリアル同様、gemを入れてsassにインポートするやり方です。

#筆者の環境

Macbook Air(M1, 2020)
macOS Big Aur バージョン11.4

ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [arm64-darwin20]
Rails 6.1.4.1

#①gemを入れる
bootstrap3では’gem bootstrap-sass’を入れていましたが、bootstrap5では２つ入れるそうです。

Gemfile

gem 'bootstrap', '~> 5.1'
gem 'jquery-rails'

#②cssファイルをscssに変更する
こちらはrailsチュートリアル同様に行いました。

#③importする

railsチュートリアル同様custom.scssを新しく作り,一番上に次のように記述します。

custom.scss

@import "bootstrap";

@import "bootstrap-sprockets";
@import "bootstrap";”

このようにrailsチュートリアルでは書かれていますが、

@import "bootstrap-sprockets";

こちらの部分でSyntaxErrorが出てしまい動きませんでした。

#他にも

・bootstrapファイルをダウンロードしてそれを参照する方法
・htmlファイルにbootstrapのHP情報等を記載して読み込む方法
・yarn,npmなどを使う方法

などがあるようでした。