Vuetifyにおけるスタイル崩れ
Rails6 + Vue + Vuetify でVuetify入門してた. Vuetifyのレイアウトでいろいろ試してみたところ, ハンバーガーメニューのスタイル崩れが発生した.
Vuetify App Barsのナビゲーションアイコンに 意図しないグレーの円が表示されている. また,ハンバーガーメニュー以外にもナビゲーションメニューのうち ラベルのEDITボタンなども表示崩れが発生している.
意図しないスタイル反映の解除
スタイル崩れの共通点として,いずれもボタンタグなので ボタンタグに関するCSSがおかしいのだろうということはわかったが, その原因をすぐに見付けることができなかった.
Rails,特にCSSなどのフロントエンドは詳しくない上に Vuetifyもよく理解していなかったので(VuetifyのGetting Startedはあまり親切ではないと思う) その設定等がおかしいのかと思って試行錯誤していた.
結果, app/assets/stylesheets/application.css
の反映の有無により
スタイル崩れが生じることがわかった.
これは同ディレクトリに active_admin.scss
があり,
application.css
がこのファイルを読み込んでいるため
ActiveAdmin以外のページにもActiveAdminのスタイルが適用されていた.
... * *= require_tree . *= require_self */
このため, require_tree .
を削除することで解決した.
require_treeの設定
この require_tree .
でいろんなスタイルが反映されて表示崩れが発生するのは
Railsあるあるな挙動らしい.
app/assets/stylesheets/
にscssファイルを生成すれば
(generatorでビューを作成すれば勝手に作成される)
自動的に application.css
が読み込んでくれる.
逆にページごとに異なるCSSを適用したいケースがある場合は
この require_tree .
の記述を削除し,
共通ファイルは個別に明示的に指定した上で
各ページのビューファイル (*.html.erb
など)にてstylesheet_link_tag
で個別に読み込むCSSを指定すればよい.
なるほど?