前回のあらすじ

前回は環境構築編で環境を構築していきました
[有料級]　Rails7(Rurbo), Docker, Bootstrap5を使ったtodoリストの作り方第0章-1(環境構築編)
まだみていない方は是非みていただけるとありがたいです！

事前準備

Dockerを一度止めている方はこちらのコマンドでDockerを起動しましょう。

docker-compose up -d

Javaspcptの設定

今回はRails7を使うのでimportmapを使ってBootstrap5のJavaScriptライブラリを追加します。

JavaScriptライブラリの追加

こちらのコマンドで前回作ったDockerコンテナに入ります

docker-compose exec app bash

JavaScriptライブラリを追加します。

bin/importmap pin bootstrap

するとconfig/importmap.rbに下記の2行(8、9行目くらい)が追加されるので確認してみましょう。

config/importmap.rb

pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.3/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.7/lib/index.js"

JavaScriptファイルの編集

最後にapp/javascript/application.jsの最後に下記の記述を追加します。

app/javascript/application.js

import "bootstrap"

Javaspcptの設定(FontAwesome)

ついでにFontAwesomeも追加しておきましょう

JavaScriptライブラリの追加

bin/importmap pin @fortawesome/fontawesome-free

するとconfig/importmap.rbに下記の1行(10行目くらい)が追加されるので確認してみましょう。

config/importmap.rb

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.4.0/js/fontawesome.js"

最後の部分をall.jsに変えます

config/importmap.rb

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.4.0/js/all.js"

JavaScriptファイルの編集

最後にapp/javascript/application.jsの最後に下記の記述を追加します。

app/javascript/application.js

import "@fortawesome/fontawesome-free"

こちらでFontAwesomeは使えるようになります。

CSS関連の設定

GemfileにBootstrapを追加

Gemfile内にBootStraのGemを追加します。

Gemfile

gem 'bootstrap', '~> 5.1.3'

追加したらbundle installをします。

bundle install

Scssファイルの編集

app/assets/stylesheets/application.cssのファイル名をapplication.scssに変更します。

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

名前を変更したらapplication.scssに下記のコードを追加します。

app/assets/stylesheets/application.scss

@import "bootstrap";

これでBootstrap5の導入が終わりました。

今回はここまで！
続けて読んでもらうとありがたいです！

[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-1 (Todoリスト準備編)