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を指定すればよい．
なるほど？
