Active_adminのCSSが全てのページに反映されてしまいます。

active_adminのCSSをadminページだけでおさめたい。

発生している問題

現在、RailsでQ&Aのアプリケーションを作成中です。
ユーザーと管理者の両方を作成したく、gem "active_admin"を使用しました。

active_adminは、無事導入できました。
ただ、ユーザー側のログイン画面など管理者ページ以外でもactive_adminのCSSが聞いている状況です。

管理者画面

ユーザーログイン画面

ユーザーTOP画面

※現状、このページにCSSは適応しておりません。

こちらの解決策を色々調べましたが、出てこず困っております。
お分かりの方がいましたらご教授頂けますと幸いです。

該当のソースコード

Gemfile.rb

gem "devise"
gem "activeadmin"
gem "refile", require: "refile/rails", github: 'manfe/refile'
gem "refile-mini_magick"
gem 'bootstrap', '~> 4.5'
gem 'jquery-rails'
gem 'font-awesome-sass', '~> 5.13'
gem "pry-rails"
gem 'kaminari','~> 1.2.1'
gem 'rails-i18n'
gem 'devise-i18n'
gem 'active_admin_theme'

active_admin.scss

@import "active_admin/mixins";
@import "active_admin/base";
@import "wigu/active_admin_theme";


// Overriding any non-variable Sass must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Answerly</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header>
      <%= render "layouts/header" %>
    </header>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
    <%= yield %>
    <footer>
       <%= render "layouts/footer" %>
    </footer>
  </body>
</html>

_header.html.erb

<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="/"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
    <!--customersログイン時のヘッダー-->
    <% if user_signed_in? %>
      <li class="nav-item">
        <%= link_to destroy_user_session_path, method: :delete do %>
          <i class="fas fa-sign-out-alt">ログアウト</i>
        <% end %>
      </li>
    <% else %>

    <!--ログイン前時のヘッダー-->
      <li class="nav-item">
        <%= link_to "#" do %>
          <i class="fas fa-store-alt">About</i>
        <% end %>
      </li>
      <li class="nav-item">
        <%= link_to new_user_registration_path, data: {"turbolinks" => false} do %>
          <i class="fas fa-user-plus">新規登録</i>
        <% end %>
      </li>
      <li class="nav-item">
        <%= link_to  new_user_session_path do%>
          <i class="fas fa-user">ログイン</i>
        <% end %>
      </li>
    <% end %>
    </ul>
  </div>
</nav>

行動規範の内容に同意します

回答1件

ベストアンサー

application.css と別に admin.css を作る。
各々必要なものだけ取り込む

そして
案１ ActiveAdminとその他の画面で layoutを変え、取り込む styleを変える
案２ applidation.html.erbのstyle取込み部分を、controllerに応じて切り替える

投稿2021/04/01 23:06

winterboum

総合スコア23401

tani__san929

2021/04/03 14:32

回答ありがとうございます。それで対応させていただきました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！