2013-05-05 8 views
5

まず、私はレールの初心者です。私はレールのWebサイトに取り組んでいます。これには、 application_controller、static_pages_controllersおよびusers_controllerの3つのコントローラがあります。彼らはすべて静的ページコントロールを除くapp/assets/stylesheets/(application.cssとusers.css.scss) のそれぞれのcss(scss)ファイルを持っていて、全体のレイアウトや共通要素にはcustom.css.scssを持っています述べたように.Iは、コントローラの特定のスタイルシートを使用 hereレールのコントローラー固有のスタイルシート3:継承

私の質問は以下のとおりです。

1)のcustom.cssでのCSSルールは、私は別々のコントローラCSSで明示的に定義されているものを除き、すべてのコントローラのビューに適用されていますか?

2)はい、私はルールがcustom.css.scssとusers.css.scss

custom.css.scssの両方で定義されている場合 - 体{背景色:カラー1;}

users.css.scss - ボディ{背景色:カラー2;}

それでもstatic_pages_controllersとusers_controllers両方のビューは、背景カラー2を示します。どこが間違っていますか? users_controllerのビューのみがcolor2を表示し、static_pages_controllerはcolor1を表示する必要があります。

+0

ページ(アクション? )特定のバージョン:http://stackoverflow.com/questions/15708794/page-specific-css-with-rails-appこれは、http://stackoverflow.com/questions/6167805/の複製としてマークされています。 using-rails-3-1-you-do-you-you-page-specific-javascript-code(正しいIMHO)を使用してください。 –

+0

関連:http://stackoverflow.com/questions/15708794/page-specific-css-with-rails-app –

答えて

37

Rails guide on how to use the asset pipelineは完全に真実をここで伝えていません。それは言う:

これらのファイルはその後、ちょうどそのような<% = javascript_include_tag paramsはのように線でこれらのコントローラにロードすることができるようあなたは、それぞれのアセットファイル内のコントローラにユニークな任意のJavaScriptやCSSを置くべき

[:コントローラ] %>または<%= stylesheet_link_tag params [:コントローラ]%>

彼らは示唆し、各コントローラに特定のスタイルシートをロードしますが、彼らは箱から出し示唆として、それが動作しないよう今、あなたを行うことができます。あなたがしなければならないいくつかのことに言及することを怠ります。あなたが場所に残さ、application.css、から//= require_tree .ディレクティブを削除する必要が

  1. は、フォルダ内の他のすべての資産をロードします。これはすべてのページがusers.cssをロードすることを意味し、コントローラ固有のスタイルシート行を例のように追加するとコントローラスタイルシートが2回ロードされます。

  2. 個々のファイルをプリコンパイルするようにRailsに指示する必要があります。デフォルトでは、application.css以外のすべての* .cssファイルは、プリコンパイラによって無視されます。

    # in environments/production.rb 
    # either render all individual css files: 
    config.assets.precompile << "*.css" 
    # or include them individually 
    config.assets.precompile += %w(users.css static_pages.css) 
    
  3. 最後に、Railsのガイドの指示に従って、あなたのスタイルシートのようなものを見て含まれて変更する必要があるでしょう:この問題を解決するには、このような何かをするためにあなたの設定を編集しなければならないだろう


    <%# this would now only load application.css, not the whole tree %> <%= stylesheet_link_tag :application, :media => "all" %> <%# and this would load the controller specific file %> <%= stylesheet_link_tag params[:controller] %> 
しかし、上記真にベストプラクティスではないかもしれません。確かに、個々のスタイルシートが必要な場合もありますが、クライアントが1つのファイルをキャッシュできるように、スタイルバンドルを提供したいと思うことがほとんどです。結局のところ、資産パイプラインがどのように機能しているのでしょうか。

さらに、コントローラー固有のスタイルシートにオーバーライドルールを追加するだけで、ロードオーダー固有のスタイルの絡み合いがゲート外に作成されます。これはおそらく良くないでしょう。 、あなたのレイアウトで次に

// in application.css (or some other commonly loaded file) 
background-color: $color1; 

// in users.css.scss 
body.controller-users { 
    background-color: $color2; 
} 

// and so on... 

のように、身体クラスにコントローラ名を追加します:

<body class="controller-<%= params[:controller] %>"> 

より良いアプローチは、コントローラシートにこのような何かをスタイルを名前空間にあるかもしれません

このように、スタイルは読み込み順序だけでなく名前空間によって解決されます。さらに、このソリューションでは、必要に応じて個別のコントローラー固有のスタイルシートをロードすることもできますが、それを忘れてすべてをapplication.cssにコンパイルすることができます。すべてのスタイルは各ページにロードされますが、コントローラー固有のスタイルだけが適用されます。 Railsの4.xで

+1

これは*良い*回答です。このコミュニティでよく共有される良い習慣があるためですそれはその短所を示し、より良い代替案を提案します。どうもありがとう!! – PEF

0

あなたが設定でこれらの行を追加する必要があり

/environment.rbに

config.assets.precompile < < "* .cssの"

関連する問題