LoginSignup
9
10

More than 1 year has passed since last update.

Rails 7.0でbootstrap-iconsを使う方法

Last updated at Posted at 2022-01-06

(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を使う方法を紹介します。

おことわり

この方法がベストかどうか確信がないので、もっといい方法があればコメント欄等で教えてください :pray:

前提条件

以下のコマンドで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に以下の行を追加する

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・・・と思いきや、アイコンが表示されない!

9ioc9.png

ログを見ると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を編集する。

config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

サーバを停止し、bin/devでサーバを再起動する。これでOK!

Screen Shot 2022-01-06 at 17.20.24.png

おしまい。

古い手順

以下は上の手順を見つける前に考えた手順です。こっちは参考にしなくて良いです。

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・・・と思いきや、アイコンが表示されない!

9ioc9.png

ログを見ると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!

Screen Shot 2022-01-06 at 17.20.24.png

最後に、woff/woff2ファイルがgitにコミットされないように以下のコマンドを実行する。

touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

おしまい。

備考

この記事はStack Overflowに投稿して自己解決したQ&Aの転載です。

9
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
10