Bootstrap5のRails6への導入方法

「最短距離でしっかり身に付く！Webアプリケーション開発の教科書 〜Ruby on Railsで作る本格Webアプリ〜」ではRailsにBootstrapを導入する手順を説明している．執筆当時，Bootstrapのバージョンは4だったのだが，いつの間にかバージョンアップしていて，書籍で説明している手順ではうまく適用できなくなっている．

そこで，ここではその補足として，現時点（2021年6月）でのBootstrap導入方法について説明する．

Bootstrap5の導入

まず，端末から次の操作をしよう．

$ yarn add bootstrap

$ yarn add @popperjs/core

次に，app/views/layouts/application.html.erb のヘッダー部を，次のように修正する．具体的には，stylesheet_pack_tag の行（赤字部分）を追加する．

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

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

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

app/javascript/stylesheets/application.scss を，次の手順で用意しよう．

$ mkdir app/javascript/stylesheets

$ echo '@import "bootstrap";' > app/javascript/stylesheets/application.scss

app/javascript/stylesheets/application.scss には，以下の内容が書き込まれているはずだ．

@import "bootstrap";

さらに，app/javascript/packs/application.js に次を追記する．

import "bootstrap"

import "../stylesheets/application"

書き込む場所は，import "channels" と Rails.start() の間でよい．

テスト

rails new した後に，上記手順でBootstrapを導入したとする．テストのために，コントローラとビューを1つ作る．

$ bin/rails g controller home index

app/views/home/index.html.erb に，以下の内容を追記しよう．

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

追記する場所はどこでも構わないが，まあ，末尾でよい．

$ bin/rails s

サーバを起動して，ブラウザで，http://localhost:3000/home/index をアクセスしてみよう．正しく設定できていれば，次のような画面になるはずだ．Bootstrap化されていることを確認できるだろう．