web-dev-qa-db-ja.com

Railsアセットパイプラインにページ固有のCSSを追加する

これは以前にいくつかの人が尋ねた質問ですが、質問のどれもが私が役立つと思う方法で完全に質問または回答されたものではなかったため、私は役立つと思われる質問と回答を書いています。

Rails 3.1+アプリをアセットパイプラインを使用しています。異なるCSSを使用したい特定のアクションが1つあります（私の特定のケースでは、印刷用のページがあります） 、完全に異なるCSSが必要であり、Javascriptは必要ありません。）現在、アプリケーション固有のCSSファイルは1つしかありません。新しいCSSファイルを追加して、アセットパイプラインに自分のファイルを使用するように指示するにはどうすればよいですか？

たとえば、現在、app/assetsは次のようになっています

app/assets
    /javascript
        application.js
        custom.js.coffee
    /css
        application.css
        custom.css.scss

特定のアクションのビューで使用されるprint.cssファイルを追加したい。このビューはapplication.cssファイルを使用しません。 print.cssを追加するにはどうすればよいですか？

ruby-on-railsasset-pipeline
18
Kevin

私はこのブログ投稿が非常に役立つことがわかりました： http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/ 。私の答えは、このブロガーがすでに書いたものを言い換え、いくつかの不足している詳細を記入します。

まず、 the Rails Asset Pipeline to the Asset Pipeline を読んで理解しておくことが重要です。残念ながら、このガイドではアクション固有のアセットを追加する方法を明確に説明していませんが、知っておく必要があるいくつかの概念をカバーしています。これらのアイデアを理解していることを確認してください：

  • アセットパイプラインがJavascript、CSS、およびその他のアセットをコンパイルして、Railsサーバーがアセットをキャッシュしてパフォーマンスを向上できるようにすること。
  • そのマニフェストファイルは、require、require_tree、require_selfなどのコマンドを使用して、一緒にコンパイルされるファイルを示します。
  • アセットパイプラインが本番環境で適切に動作するためには、rake assets:precompileを手動で実行して、publicディレクトリにコンパイル済みの縮小されたアセットを作成する必要があります。

これらのアイデアは、資産パイプラインに関する最小限の「知る必要のある」情報です。これらのアイデアをまだ理解していない場合は、パイプラインに関する「エキスパートまたはマニア」レベルの知識がなく、残念ながらSOはこのことを学ぶのに適した場所ではありません。さいわい、 the Railsアセットパイプラインのガイド は15分の短い読み取りであり、必要に応じてすばやく習得できます。

次に、これらは、アセットパイプラインが新しいprint.cssファイルを正しく認識して処理するようにするために必要な変更です。

次の手順を実行します：

  1. print.cssファイルをapp/assets/cssに追加します。
  2. print.cssの場所をRailsに示すマニフェストファイルを作成する必要があります。追加するCSSファイルは1つだけですが、これを行う必要があります。これは簡単なステップです。
    • print.jsというファイルをapp/assets/javascriptに追加します。
    • この行をprint.jsに追加します。
 // =印刷が必要

これは、print.jsファイル全体の唯一の行になります。私が正しく理解している場合、Railsはマニフェストファイルのファイル拡張子が.jsであると想定しているため、print.cssをマニフェストファイルとして使用していません。

  1. ここで、Railsにprint.jsマニフェストを見つけて使用するように指示する必要があります。 config/application.rbファイルに次の行を追加します。
 config.assets.precompile + =％w（print.js）
  1. あと少しで完了です！ただし、すでに存在するapplication.jsマニフェストには//= require_tree .という行が含まれています。つまり、print.cssファイルが含まれます。これにより、print.cssスタイルが、単一のビューだけでなくサイト全体に影響します。これに対処するには2つの方法があります。
    • application.jsとprint.jsがアセットを共有しない場合は、application.jsでstubコマンドを使用して、print.jsで使用されているアセットを除外できます。これが行うことは、application.jsがprint.jsが参照するアセットを参照ファイルの独自のリストから削除するように指示することです。変更されたapplication.jsは次のようになります。
（snip ...）
 require_tree。
 stub print

詳細は this answer を参照してください。

  • print.jsファイルとapplication.jsファイルがいくつかのアセットを共有している場合は、application.jsが使用するすべてのアセットをサブディレクトリに移動する必要があります。私はこれを自分でしなかったので、私はこの分野でほとんど助けにはなりませんでした。手順については この答え を参照してください。

これで、アセットパイプラインにprint.cssが含まれました。特定のビューでprint.cssを使用するようにRailsに指示する必要があります。

アクションがreportsコントローラーにあり、アクションの名前がprint_reportsであるとします。これは、reports_controller.rbファイルとprint_reports.html.erb（または.haml）ファイルがあることを意味します。これらのファイルにいくつかの変更を加える必要があります。

  1. まず、app/views/layoutsに新しいレイアウトを追加します。おそらくprint.html.erbと呼んでください。この新しいレイアウトをprint_reports.html.erbファイルに使用します。必要に応じて設定してください。印刷を意図したページの場合、これは次のように非常に単純なものになるでしょう。
 <html> 
 <head> 
 <title = "Print"> 
 </ head> 
 <body> 
 <％=利回り％> 
 </ body> 
 </ html>

別のレイアウトを使用すると、このレイアウトと他のアプリケーションで使用されるレイアウトを同期させることが難しいという欠点がありますが、アクションに別のCSSファイルを使用している場合は、レイアウトを同じにしたくない場合があります。 。

  1. stylesheet_link_tagを指すレイアウトのヘッダーにprint.cssを追加します。
 <html> 
 <head> 
 <title = "Print" />
 <％= stylesheet_link_tag "print"％> 
 </ head> 
 <body> 
 <％= yield％> 
 </ body> 
 </ html>
  1. コントローラーでは、アクションに新しいレイアウトを使用するようにRailsに指示します。 layout 'print', only: [:print_reports]という行をコントローラーに追加します。
 class reports_controller <ApplicationController 
 layout 'print'、only：[：print_reports] 
 
 #snip

詳細といくつかの異なるアプローチについては この質問 を参照してください。

この時点で、アプリを実行すると、print_reportsアクションがprint.cssを正しく使用しているはずです。

サーバーにデプロイする前に、必ずrake assets:precompileを実行してください。

27
Kevin

皆さんは非常に複雑な答えを出しています。

1 app/assets/stylesheetsに移動します
2。拡張子が.cssのファイルを作成します
3。config/initializers/assets.rbに移動します
4。このコード行を挿入Rails.application.config.assets.precompile += %w( file.css )
5。file.cssを作成したファイルに置き換えます
6。html.erbファイルに移動します
7。<head>、<%= stylesheet_link_tag "file" %>に入力します
8。fileをファイル名に置き換えます（名前に拡張子なし）

ファイルをリンクしました。

2
Rishi Ryan

公式ソリューション

これは公式に文書化されていますRailsガイドはこちら： http://guides.rubyonrails.org/asset_pipeline.html#controller-specific-assets

実際には、require_treeディレクティブ（application.cssおよびapplication.jsにあります）を省略して、これをテンプレートで使用できます。

コントローラ固有のJavaScriptの場合：

<%= javascript_include_tag params[:controller] %>

コントローラ固有のCSSの場合：

<%= stylesheet_link_tag params[:controller] %>
2
Bijan

あなたのレイアウトで

<head>
  // ...
  <%= yield :stylesheets %>
</head>

あなたの見解では

<%= provide :stylesheets do %>
  // your page-specific css
<% end %>
1
glacasandile

別のCSSを使用したい特定のアクションがあります。

ここにあなたが探しているものを達成するための代替方法があります：

/ views/layouts/application.html.rbのアプリ本体にコントローラー名とアクション名を追加します：

<body class="<%= controller_name %>-<%= action_name %>">
  <%= yield %>
</body>

次に、.scssファイルで：

.controller_name-action_name {
  // your css goes here
}

したがって、コントローラがstatic_pagesで、アクションがhomeの場合：

.static_pages-home {
  // your css goes here
}

多田！ CSSはその特定のアクションに対してのみ表示されます。

0
William Hampshire