ruby-on-rails - Twitter Bootstrap cssと競合するRails Active Admin css

Question

私は Rails アセットパイプラインに少し慣れていないので、何か間違ったことをしている可能性があります。バックエンドに Active Admin を使用し、フロントエンドアプリケーションに Twitter ブートストラップ CSS を使用しようとしています。

bootstrap.css を/app/assets/stylesheetsに追加してから、以下も追加しました。

//= require bootstrap

application.css へ - 次に、ローカルでアセットのプリコンパイルを行いました

うまく機能しているように見えますが、スタイリングの一部が正確に反映されていません。これは、アクティブな管理者の css がそれをオーバーライドしているためだと思います。

私の理解では、アプリケーションは css アセットをアプリケーションの css パブリックアセットにコンパイルし、アプリケーションは実行時にそのファイルを使用します。

どういうわけか2つを分離し、フロントエンドのメインcssとしてtwitterブートストラップcssを使用し、フロントエンドでアクティブな管理者のcssファイルを使用しないように指示する必要があります。

これを行う最善の方法は何ですか？

score 132 · Accepted Answer

同じ問題があり、移動することで修正できました

app/assets/stylesheets/active_admin.css.scss

に

vendor/assets/stylesheets/active_admin.css.scss

Railsガイドに記載されているように、アクティブな管理アセットが含まれている必要があります。vendor/

「ベンダー/アセットは、JavaScript プラグインや CSS フレームワークのコードなど、外部エンティティが所有するアセット用です。」

score 29 · Accepted Answer

ActiveAdmin の使用に関する RailsCasts ビデオを見ましたか? このビデオでは、ActiveAdmin CSS がメインアプリの CSS を踏まないようにする方法を Ryan が示しています。

ビデオから回答に情報を移動する

application.css で、以下を削除します。

*= require_tree .

Rails 4の場合、じてんKはこれをに追加することを提案していproduction.rbます：

config.assets.precompile += ['active_admin.css']

ただし、そのSOの回答に関するコメントの1つは、これは必要ないと言っています。私はこれまでそれを必要としませんでした。

score 11 · Accepted Answer

For me changing application.css to following solves the problem:

 *= require bootstrap
 *= require_tree .
 *= stub "active_admin"

3 に答える 3