🤖

Rails 7以降でのブートストラップ導入エラー

2025/01/29に公開

Bootstrapが上手く機能していなかった原因と解決策

原因は主に2つ ありました。

  1. Importmap に Bootstrap を正しく設定できていなかった
  2. SASS(SCSS)の設定ミス(BootstrapのSCSSファイルを正しく読み込めていなかった)

① Importmap に Bootstrap を正しく設定できていなかった

bin/importmap pin bootstrap コマンドを実行しましたが、BootstrapのCSSはImportmapではなくSASS経由で管理する必要があります

正しい対応
BootstrapをImportmapで使う場合は、以下の設定が必要

bin/importmap pin bootstrap
bin/importmap pin @popperjs/core

そして、JavaScriptファイル app/javascript/application.js に追加

import "bootstrap"

② SASS(SCSS)の設定ミス

エラーメッセージ:

Error: File to import not found or unreadable: bootstrap.

これは、Railsの アセットパイプライン(SASSの設定)がBootstrapを正しく読み込めていなかった ために発生しました。

正しい対応

  1. app/assets/stylesheets/application.scss に以下を記述:
@import "bootstrap";
  1. Bootstrapを手動でインストール(SCSS利用の場合)
yarn add bootstrap

または

npm install bootstrap

まとめ

原因 エラー内容 解決策
① Importmap の設定不足 BootstrapのJSが動かない bin/importmap pin bootstrap を実行し、 app/javascript/application.jsimport "bootstrap" を追加
② SCSS(SASS)の設定ミス bootstrap を読み込めない app/assets/stylesheets/application.scss@import "bootstrap"; を記述し、 yarn add bootstrap でインストール

これで、Bootstrapが正しく機能するはずです! 🚀

Discussion