出力を入力へ

プログラミングに関する自分が考えた事を中心にまとめます

Rails+Vuetify+ActiveAdminでボタンのスタイルが崩れる

Vuetifyにおけるスタイル崩れ

Rails6 + Vue + Vuetify でVuetify入門してた. Vuetifyのレイアウトでいろいろ試してみたところ, ハンバーガーメニューのスタイル崩れが発生した.

style collapsed huberger menu
スタイル崩れが発生したハンバーガーメニュー

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を指定すればよい.

なるほど?