🤖
Rails 7以降でのブートストラップ導入エラー
Bootstrapが上手く機能していなかった原因と解決策
原因は主に2つ ありました。
- Importmap に Bootstrap を正しく設定できていなかった
- 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を正しく読み込めていなかった ために発生しました。
✅ 正しい対応
-
app/assets/stylesheets/application.scss
に以下を記述:
@import "bootstrap";
- Bootstrapを手動でインストール(SCSS利用の場合)
yarn add bootstrap
または
npm install bootstrap
まとめ
原因 | エラー内容 | 解決策 |
---|---|---|
① Importmap の設定不足 | BootstrapのJSが動かない |
bin/importmap pin bootstrap を実行し、 app/javascript/application.js に import "bootstrap" を追加 |
② SCSS(SASS)の設定ミス |
bootstrap を読み込めない |
app/assets/stylesheets/application.scss に @import "bootstrap"; を記述し、 yarn add bootstrap でインストール |
これで、Bootstrapが正しく機能するはずです! 🚀
Discussion