Rails7でimportmapsを有効にしたままBootstrapとBootstrap-iconsを利用する

Rails 7ではフロントエンドの仕組みが従来と異なり、webpackerの代わりimportmapsがデフォルトになっている。importmapsを使うことでnodejsへの依存がなくなり、Railsでの開発に集中できるようになった。

ただRails 7にrails new --css bootstrapコマンドでBootstrapを導入しようとするとなぜかJavascriptがesbuildに固定され、importmapsが利用できなくなってしまう。そこでimportmapsを有効にしたままBootstrapとBootstrap-iconsを導入する方法を検討した。

BootstrapはCSSとJavascriptから構成されるが、以下の手順でCSSはsprocketsでSCSSからコンパイル、Javascriptはimportmapsから利用する形にした。

Railsアプリの作成

上述の通り--css bootstrapオプションを指定してRailsアプリを作成するとnodejs依存が残るため、--cssオプションや--javascriptオプションは利用しない。デフォルトのsprockets + importmaps構成を利用する。

$ rails new myapp
$ cd myapp

bootstrap gemとsassc-rails gemをインストールする。

$ bundle add bootstrap
$ bundle add sassc-rails

Bootstrap CSSの導入

app/assets/stylesheets/application.cssの拡張子をscssに変更し、インストールしたbootstrapを読み込むように修正する。

$ mv app/assets/stylesheets/application.{css,scss}
$ echo '@import "bootstrap";' >> app/assets/stylesheets/application.scss

あとはCSSをコンパイルすればBootstrap CSSの導入が完了する。

$ rails assets:precompile

Bootstrap Javascriptの導入

Javascriptの導入はimportmapsを利用する。
bootstrap gemに付属するbootstrap.min.jsとpopper.jsをconfig/initializers/assets.rbに追記することでプレコンパイル対象に含める。

$ echo 'Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js )' >> config/initializers/assets.rb

config/importmap.rbでこのJavascriptファイルをpinする。

$ cat << EOL >> config/importmap.rb
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true
EOL

app/javascript/application.jsでこれらのJavascriptをインポートしておく。

$ cat << EOL >> app/javascript/application.js
import "popper"
import "bootstrap"
EOL

最後にJavascriptをコンパイルすればBootstrap Javascriptの導入が完了する。

$ rails assets:precompile

Bootstrap-iconsの導入

bootstrap gemにはbootstrap-iconsは含まれていないので、個別に導入する必要がある。
ちょうどよいgemが見つからなかったので、直接アイコンファイルとcssをアセットに追加する。

まずは最新のbootstrap-iconsをリリースページからダウンロードし解凍する。

$ curl -L https://github.com/twbs/icons/releases/download/v1.10.4/bootstrap-icons-1.10.4.zip -o /tmp/bootstrap-icons-1.10.4.zip
$ unzip /tmp/bootstrap-icons-1.10.4.zip -d /tmp

bootstrap-icons.woff, bootstrap-icons.woff2が保存されているfontsディレクトリをapp/assets/fontsディレクトリにコピーする。

$ cp -r /tmp/bootstrap-icons-1.10.4/font/fonts app/assets

scssファイルを取り出しapp/assets/stylesheetsにコピーする。

$ cp /tmp/bootstrap-icons-1.10.4/font/bootstrap-icons.scss  app/assets/stylesheets

scssファイルからみたfontファイルのインポートパスを修正する。

$ sed -i 's/url/font-url/' app/assets/stylesheets/bootstrap-icons.scss
$ sed -i 's/#{$bootstrap-icons-font-file}/#{$bootstrap-icons-font}/' app/assets/stylesheets/bootstrap-icons.scss

最終的に以下のような表示になっていればOK。

$ head -n 12 app/assets/stylesheets/bootstrap-icons.scss
/*!
 * Bootstrap Icons (https://icons.getbootstrap.com/)
 * Copyright 2019-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE.md)
 */

$bootstrap-icons-font: "bootstrap-icons" !default;
$bootstrap-icons-font-dir: "./fonts" !default;
$bootstrap-icons-font-file: "#{$bootstrap-icons-font-dir}/#{$bootstrap-icons-font}" !default;
$bootstrap-icons-font-hash: "24e3eb84d0bcaf83d77f904c78ac1f47" !default;
$bootstrap-icons-font-src: font-url("#{$bootstrap-icons-font}.woff2?#{$bootstrap-icons-font-hash}") format("woff2"),
                           font-url("#{$bootstrap-icons-font}.woff?#{$bootstrap-icons-font-hash}") format("woff") !default;

最後にmanifest.jsファイルに作成したfontsディレクトリをリンクする。

echo '//= link_tree ../fonts' >> app/assets/config/manifest.js

最後にもう一度CSSをコンパイルすればBootstrap-iconsの導入が完了する。

$ rails assets:precompile