環境
- Rails 7.1.3
- ruby 3.2.1
- bootstrap 5.3.2
目的
railsでbootstrapを動かす
Rails tutorialを終えて、その他にもハンズオン形式のサイトに取り組んでいたらbootstrapを使ったモーダルなどが動作しない･･･
ということでとりあえず動くようになるまで調べた結果を書いていきます。
※間違えていたらマジで色々教えてください
参考サイト
https://nobrainerprogramming.com/rails-7-modal-forms-with-hotwire-and-bootstrap/
新しいプロジェクトを作る
まずはコマンド
rails new modal
Gemfileに必要なgemを書く
gem 'bootstrap'
gem 'mini_racer'
gem 'sassc-rails'
sassc-railsは古いらしい
darts-scssというのがrails7では推奨みたいなので、調べて理解したら記事作るかも
gemをインストールする
bundle install
ファイルの名前を変更する
app/assets/stylesheets/application.css
↓ 変更後
app/assets/stylesheets/application.scss
※.cssが.scssになってます
★bootstrapのデザインを使えるようにする(css)
そのファイルの中に書く
@import "bootstrap";
これでbootstrapのデザインが使えます
試しにどこかアクセスして表示が確かめれるViewファイルに書いてみます
<h1 class="text-info">bootstrap</h1>
無事色が変わればOK！
★ bootstrapのモーダルなど動くようにする(js)
あまり詳しくないのですが、モダールとか他のなんやかんやはbootstrap.js的ななんかjavascript使うやつもあるみたいなんでそれ動くようにします
rails7標準のimportmapを使います
bin/importmap pin bootstrap
これを入力するとこれらが追加されます
pin "bootstrap"
pin "@popperjs/core", to: "@popperjs--core.js"
そして追記
import "@popperjs/core"
import "bootstrap"
5.3らへんは、なんかクロームのデベロッパーツールみたらめっちゃエラー出るからpopperが原因みたいなので、こうしないといけないという記事を発見
参考URL：
https://bootstrap-guide.com/getting-started/javascript
参考記事から抜粋
"imports": {
"@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js",
"bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.esm.min.js"
}
結論:要はこうすればいいのか...
pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
これでモーダルなどが動くのでWeb上に転がってるハンズオンサイトも進めれました！
popperってなんやねん････
初めての記事を書いてみました。
自分で見直す為と、自分が躓いた部分で誰か参考になればという想いで書いてみました。