(2022.2.20追記)
cssbundling-rails 1.1.0で bootstrap-icons のセットアップが自動的に行われるようになりました。
Install bootstrap-icons along with bootstrap by @viktorianer in #76
なので、cssbundling-rails 1.1.0を使った場合はこの記事で説明している手順が不要になると思います(ただし未検証)。
その点に留意して続きを読んでください。
ちなみにこの変更は僕がStackOverflowに投稿して自己解決したQ&Aにインスパイアされて実装された変更みたいです😄
Many thanks to Junichi Ito on StackOverflow
https://stackoverflow.com/questions/70526113/how-to-use-bootstrap-icons-with-rails-7-0
Rails 7.0でbootstrap-iconsを使う方法を紹介します。
おことわり
この方法がベストかどうか確信がないので、もっといい方法があればコメント欄等で教えてください
前提条件
以下のコマンドでrails newしたRails 7.0アプリを想定します。
rails new everydayrails-rspec-jp-2022 --css bootstrap
また、この記事で使う bootstrap-icons のバージョンは1.7.2です。
手順
bootstrap-iconsをインストールする
npm i bootstrap-icons
app/assets/stylesheets/application.bootstrap.scss
に以下の行を追加する
@import "bootstrap-icons/font/bootstrap-icons";
アイコンを使うviewを用意する
<%= link_to new_project_path, class: "btn btn-primary" do %>
<i class="bi bi-plus" aria-hidden="true"></i>
New Project
<% end %>
bin/dev
でサーバを起動する。これでOK・・・と思いきや、アイコンが表示されない!
ログを見るとRoutingErrorエラーが起きている
Started GET "/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff2"):
Started GET "/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff"):
というわけで、追加で以下の対応を行う。config/initializers/assets.rb
を編集する。
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")
サーバを停止し、bin/dev
でサーバを再起動する。これでOK!
おしまい。
古い手順
以下は上の手順を見つける前に考えた手順です。こっちは参考にしなくて良いです。
bootstrap-iconsをインストールする
npm i bootstrap-icons
app/assets/stylesheets/application.bootstrap.scss
に以下の行を追加する
@import "bootstrap-icons/font/bootstrap-icons";
アイコンを使うviewを用意する
<%= link_to new_project_path, class: "btn btn-primary" do %>
<i class="bi bi-plus" aria-hidden="true"></i>
New Project
<% end %>
bin/dev
でサーバを起動する。これでOK・・・と思いきや、アイコンが表示されない!
ログを見るとRoutingErrorエラーが起きている
08:05:31 web.1 | Started GET "/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1 |
08:05:31 web.1 | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff2"):
08:05:31 web.1 |
08:05:31 web.1 | Started GET "/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1 |
08:05:31 web.1 | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff"):
というわけで、追加で以下の対応を行う。public/fonts
ディレクトリを作成
mkdir public/fonts
copyfilesをインストールする
npm i copyfiles
CSSビルド時にwoff/woff2ファイルがコピーされるように、package.json
の"build:css"スクリプトを編集する。
"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
サーバを停止し、bin/dev
でサーバを再起動する。これでOK!
最後に、woff/woff2ファイルがgitにコミットされないように以下のコマンドを実行する。
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore
おしまい。
備考
この記事はStack Overflowに投稿して自己解決したQ&Aの転載です。