🙄

rails7 bootstrap5 scssを変更しても反映されない!!

2023/08/26に公開

表題の通り、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