web-dev-qa-db-ja.com

Rails 3.1でCSSフレームワークをロードするにはどうすればよいですか？

CSSフレームワークBlueprintをRails 3.1アプリケーションにロードしようとしています。

Rails 3.0+では、views/layouts/application.html.erbに次のようなものがあります：

  <%= stylesheet_link_tag 'blueprint/screen', 'application' %>
  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->

ただし、Rails 3.1はSASSを使用するようになりました。これらのブループリントCSSファイルをロードする適切な方法は何でしょうか？

現在、app/assets/stylesheets /にブループリントディレクトリがあります

私のapp/assets/stylesheets /application.cssは次のようになります。

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/

Application.cssを使用して、必要なブループリントファイルをロードする必要がありますか？もしそうなら、どのように？

次に、Blueprint/ie.cssをロードするために、IE8をチェックするための何らかの条件をどのように提供しますか？

編集：

うーん、アプリのウェブページをもう一度リロードします。 Rails 3.1にはブループリントファイルが含まれています。cssファイルがフォルダー（この場合はapp/assets/stylesheets/blueprint）にある場合でも。）

それは私に2つの質問を残します

  1. SASSを使用してif lt IE 8条件を適用する必要がありますか？
  2. SASSを使用して印刷形式（つまり、<％= stylesheet_link_tag'blueprint/print '、' media '=>' print '％>）のcssファイルをロードするにはどうすればよいですか？
ruby-on-rails-3blueprint-cssasset-pipeline
26
Christian Fazzini

Rails 3.1（RC）ではSASSファイルの使用が許可されていますが、強制はされません。/public/stylesheets内のファイルは引き続き正常に提供されます。

SASSパーサーをアクティブ化する（そして新しいフレームワークを利用する）場合は、my_styles.cssの名前をmy_styles.css.scssに変更し、/app/assets/stylesheetsフォルダーに配置します。次に、require_self/require_tree行のコメントを外した後、application.cssだけをapplication.erb.htmlに含めます。

詳細については、グーグルで簡単に検索した後に作成したブログをご覧ください： http://www.rubyinside.com/how-to-Rails-3-1-coffeescript-howto-4695.html ==

IE 8もの。IEは必ずしも条件を実行するとは限らないので、試してみてください。

<!--[if IE 8.000]><!--> <link href='./design/style-ie-8.css' rel='stylesheet' type='text/css' /> <!--<![endif]-->

ルールを実行するためにパーサーをリセットしようとするのはちょっとしたハッカーです

6
colinross

他の誰かが私が最終的にそれをどのようにしたのか疑問に思っているなら。

私は削除しました

 *= require_tree .

私のapp/assets/stylesheets/application.css、次のようになります：

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require 'blueprint/screen'
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

そしてapp/views/layouts/application.html.erbには、次のものがあります。

<html>
<head>
  <title><%= yield(:title).present? ? yield(:title) : 'Foobar' %></title>
  <%= favicon_link_tag %>

  <%= stylesheet_link_tag    'application' %>
  <%= javascript_include_tag 'application' %>

  <%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>

  <!--[if lt IE 8]>
    <%= stylesheet_link_tag 'blueprint/ie' %>
  <![endif]-->
...

これが誰かを助けることを願っています。

24
Christian Fazzini

このブログ （私がそうであったように）あなたが探していると思う解決策があります。

blueprintをapp/assetsに入れないでください。これは、require_treeに吸い込まれてしまうためです。 publicには置かないでください。これは、アセットが移動する場所ではないためです。それをvendor/assets/stylesheetsに入れてから、自分のapplication.html.erbの前にapplication.cssに含めます。

<%= stylesheet_link_tag 'blueprint/screen', :media => "screen, projection" %>
<%= stylesheet_link_tag 'blueprint/print', :media => "print" %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie', :media => "screen, projection" %><![endif]-->
<%= stylesheet_link_tag    "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
16
Turadg

Rails 3.1で 'blueprint-Rails'gemを使用する方法は次のとおりです。

'blueprint-Rails' gemを追加します：

/ Gemfile

gem 'blueprint-Rails', , '~> 0.1.2'

一般的なブループリントファイルをマニフェストに追加して、application.cssにプリコンパイルされるようにします。

/ app/assets/stylesheets/application.css

 /*
  *= require 'blueprint'
  */

一般的なブループリントファイルを含むapplication.cssを追加します。また、print.cssとie.cssを条件付きで追加します。

/ Views/layouts/application.html.erb

<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>
<!--[if lt IE 8]>
  <%= stylesheet_link_tag 'blueprint/ie' %>
<![endif]-->

条件のため、print.cssとie.cssは、application.cssの外部にある個別のファイルとして必要です（デフォルトでは、require'blueprint 'には含まれていません）。したがって、それらを次の場所に追加する必要があります。

/ Configuration/envoirnments/production.rb

# Separate assets
config.assets.precompile += ['blueprint/print.css', 'blueprint/ie.css']

次に実行します。

bundle exec rake assets:precompile
5
wintersolutions

物事を行う別の方法：

作成app/assets/stylesheets/custom.css

次に、必要なファイルを使用するようにcustom.cssを変更します。

/*
 *= require_self
 *= require 'colorbox/colorbox'
 *= require 'uploadify'
 *= require 'scaffold'
 *= require 'main'
*/

最後に、レイアウトのリンクタグを変更します（「アプリケーション」スタイルシートを必ず削除してください）

= stylesheet_link_tag    "custom"

次に、他のスタイルシートを手動で（「ie」固有のように）追加したり、他のスタイルシートのグループ（すべてのブループリントファイルをロードするためのブループリントなど）を追加したりできます。

また、（production.rbで）必要になる場合があります

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  config.assets.precompile += %w(custom.css)
5
montrealmike

あなたの解決策に完全に同意します。「require_tree」がapplication.cssの良い習慣であるとは思わないでください。何かが含まれ、明らかに攻撃的すぎます。私はしばらく苦労しましたが、最後に、まったく同じソリューションを選択し、アプリケーションを使用してそれらのスキャフォールドスタイルを含め、次にHTMLタグを使用していくつかのオプションの条件付きスタイルを含めました。ありがとう。

2
Leon Guan