🙄
rails7 bootstrap5 scssを変更しても反映されない!!
表題の通り、application.scssをいくら編集しても反映されなかった時の対処です。
環境
rails7
importmap使用
bootstrap5
行ったこと
-
ことの起こりは、ドロップメニューをつけたい!でした。
-
コード自体は公式から拝借して導入すれば終わり!!とタカを括っていたのですが、ドロップメニューがビローーんと長くなってしまう症状に遭遇しました。
-
デベロッパーツールで、どこのコードを編集すればいいか探り、一部解消されそうなコードを見つけたので、実際に編集。一応サーバを再起動してやるも変更できず。
-
再度デベロッパーツールを見ると変更前のコードが記述されていました。そこで、「cssの記述」ではなく「bootstrapが機能していない」と考えました。
-
tailwindcss-rails
などを導入してみるも無惨に敗北。
対処法
以下のように変更することで解決しました。
importmap.rb
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.0/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js"
から
pin "bootstrap", to: 'bootstrap.min.js', preload: true
pin "popper", to: 'popper.js', preload: true
に変更することで反映されました。
最後に
反映はされましたが、今度はドロップメニューが開かない問題に衝突しています。
1つ1つ解消していきます。
---追記ーーー
ドロップメニューが開かない問題は'application.js'にdropmenuのjsを指定するのを忘れていただけでしたw
Discussion