【Rails6】Active Adminのcssのアセットが影響しないようにサイトと分ける方法

ActiveAdminを使っていると、アセットの汚染が起こるときがあるみたいですね。

ということでActiveAdminのアセットが、admin以外のページのマニフェストでは読み込まれないようにしておきます。

assetsを退避

admin用のアセットを退避して、読み込まないようにします。

active_admin.scssとactive_admin.jsをそれぞれadminというフォルダの中に格納します。

次に、app/assets/stylesheets/application.css に下記に変更します。

*= require_directory .
*= require_self

ActiveAdminのアセットの設定を変更

ActiveAdminの設定で、読み込むアセットを一旦全部リセットして、特定のものだけ登録するということをしておきます。

以下をconfig/initializers/active_admin.rbに追加すればokです。

config.clear_stylesheets!
config.register_stylesheet "admin/active_admin.css"
config.clear_javascripts!
config.register_javascript "admin/active_admin.js"

これで、サイトと管理画面のcssを分けることができました。