前回のあらすじ
前回は環境構築編で環境を構築していきました
[有料級] 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行目くらい)が追加されるので確認してみましょう。
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の最後に下記の記述を追加します。
import "bootstrap"
Javaspcptの設定(FontAwesome)
ついでにFontAwesomeも追加しておきましょう
JavaScriptライブラリの追加
bin/importmap pin @fortawesome/fontawesome-free
するとconfig/importmap.rbに下記の1行(10行目くらい)が追加されるので確認してみましょう。
pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.4.0/js/fontawesome.js"
最後の部分をall.jsに変えます
pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.4.0/js/all.js"
JavaScriptファイルの編集
最後にapp/javascript/application.jsの最後に下記の記述を追加します。
import "@fortawesome/fontawesome-free"
こちらでFontAwesomeは使えるようになります。
CSS関連の設定
GemfileにBootstrapを追加
Gemfile内にBootStraのGemを追加します。
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に下記のコードを追加します。
@import "bootstrap";
これでBootstrap5の導入が終わりました。
今回はここまで！
続けて読んでもらうとありがたいです！
[有料級] Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-1 (Todoリスト準備編)