web-dev-qa-db-ja.com

Rails 3.2.1でコントローラー固有のスタイルシートを使用するにはどうすればよいですか？

Rails 3.2.1を使用する

次のコマンドを使用して、Homeという単純なコントローラーを作成しました。

Rails g controller Home index

そして、それは私のために新しいコントローラーとビューを作成しました：

enter image description here

「アプリケーション」と「ホーム」の2つのスタイルシートがあることに注目してください。この仮定をサポートするドキュメントが見つかりませんが、「ホーム」ビューにのみ適用されるスタイルをHome.css.scssファイルに配置していると思います。

そこで、テストとして、いくつかのグローバルスタイルをApplication.css.scss.erbに追加し、アプリケーションを実行しました。

期待どおりに適用されたスタイル。

次に、Home.css.scssファイルにいくつかのルールを追加し、「ホーム/インデックス」ビューにアクセスしましたが、そのファイルのスタイルは、個別のCSS参照リンクとしても、添付されていませんでした。単一のApplication.css.scssファイル。コメントが言うので、これは私にとって非常に混乱しています：

// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

Home.css.scssで書かれたルールが私のウェブサイトに適用されないのはなぜですか？

ruby-on-railscssruby-on-rails-3.1sass
22
Only Bolivian Here

私はそれがそのように機能するとは思いません（Home.cssはHomeコントローラーアクションにのみ適用されます）。異なるファイルは、CSSルールが何を記述しているのかを明確にするために分離するためのものです。これを読むことができます ガイド アセットパイプラインについて。デフォルトのapplication.css.scssを変更し、app/assets/stylesheetsからすべてのCSSファイルをインポートする行を削除したと思います。

7
Marek Sapota

それはこのように機能することができ、マレクは非常に正しいです、答えはガイドにあります。 セクション2.1の紹介 ：

たとえば、ProjectsControllerを生成する場合、Railsはapp/assets/javascripts/projects.js.coffeeに新しいファイルを追加し、app/assets/stylesheets/projects.css.scssに別のファイルを追加します。JavaScriptを配置する必要がありますまたは、それぞれのアセットファイル内のコントローラーに固有のCSS。これらのファイルは、<%= javascript_include_tag params[:controller] %>や<%= stylesheet_link_tag params[:controller] %>などの行を使用してこれらのコントローラー専用にロードできます。

したがって、コントローラー固有のスタイルシートをロードするようにアプリケーションを設定するには、次のようにします。

まず、application.cssマニフェストで余分な要件を削除して、すべてのスタイルシートのデフォルトの読み込みを無効にします。

通常、次のようなエントリが表示されます。

 *= require_tree .

それでもいくつかの一般的なcssファイルをロードしたい場合は、それらをサブディレクトリに移動して、次のようにすることができます。

 *= require_tree ./common

次に、アプリケーションのレイアウトに、提案されたstylesheet_link_tagを追加します。

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= stylesheet_link_tag params[:controller] %>

この例では、最初にアプリケーションのcssファイルをロードし、次に現在のコントローラー名に一致するcssファイルをロードします。

71
benz001

私はこの問題を簡単な解決策で解決しました。 bodyにコントローラー名をクラスとして追加し、views/layouts/application.html.slimを編集します。

body class=controller.controller_name

またはviews/layouts/application.html.erb：

<body class="<%= controller.controller_name%>">

そして、私のcssでは、body.controller_nameを名前空間として使用します。

/* example for /users/ */

body.users {
    color: #000;
}

body.users a {
    text-decoration: none;
}

小さなプロジェクトの場合は問題ないと思います。

14
franzlorenzon

TL; DR：

コメントは無視してください。Sassによるものではありません。ただし、@import "*";をapplication.css.scssファイルに入れると、すべてのコントローラーscssファイルが自動的にインポートされます。

全文：

免責事項：これは、Sassがある場合とない場合のアセットパイプラインフローに関する私の現在の理解です。

このコメントは、Sassではなく、標準のRailsアセットパイプライン（スプロケット）によって書かれていると思います。

// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

標準パイプラインはscssファイルを処理しますが、application.css。scssファイルを想定していません。しかし、Sassでそのようなファイルを作成すると、Sassはそれをapplication.cssファイルにコンパイルします。

Sassなしで通常のRailsアセットパイプラインを使用する場合、スプロケットはcssファイルをapplication.css自動的にファイルします（そのファイルにデフォルトの*= require_tree .行がある場合）。

application.css。scssファイルでSassを使用すると、Sassはこのファイルをにコンパイルします。 application.cssファイル。 （私はそれがあなたがすでに持っていたどんなapplication.cssファイルよりも上書きするか優先するだろうと思います）。

home.css.scssファイル（およびその他のコントローラーファイル）を自動的に含めるには、この行をに挿入します。 application.css.scssファイル：

@import "*";

参考のために、この質問を参照してください： @ importを使用してsassにディレクトリ全体をインポートすることは可能ですか？

4
Magne