Rails7 に Bootstrap を導入する

以前Rails7でTailwind CSSの導入をしましたが、今回はBootstrapを導入してみます。
esbuildを使用します。

プロジェクト作成時に導入する場合

1. rails new mofmof -j esbuild --css bootstrap でプロジェクトを作成する

2. 以下を package.json に追加する

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
  "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
  "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
  "build:css": "yarn build:css:compile && yarn build:css:prefix",
  "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
}

既存のプロジェクトに途中から導入する場合

1. 以下を Gemfile に追加

gem "cssbundling-rails"

2. bundle install を実行

3. bin/rails css:install:bootstrap 実行

4. 以下を package.json の scripts に追加する

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
  "build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
  "build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
  "build:css": "yarn build:css:compile && yarn build:css:prefix",
  "watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
}

自分で作成したCSSファイルを読み込みたい場合

例えば app/assets/stylesheets/mofmof.css というCSSファイルを読み込みたい場合はapp/assets/stylesheets/application.bootstrap.scss を以下のように変更します。

@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
@import 'mofmof';

app/assets/stylesheets/mofmof.css は css ファイルではなく scss ファイルでもコンパイルできます。

終わり

Tailwind CSSを導入した時よりも scripts が多くなっています。
使っているコマンドも違うので注意してくださいね。