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つの質問を残します
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]-->
ルールを実行するためにパーサーをリセットしようとするのはちょっとしたハッカーです
他の誰かが私が最終的にそれをどのようにしたのか疑問に思っているなら。
私は削除しました
*= 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]-->
...
これが誰かを助けることを願っています。
このブログ (私がそうであったように)あなたが探していると思う解決策があります。
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 %>
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
物事を行う別の方法:
作成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)
あなたの解決策に完全に同意します。「require_tree」がapplication.cssの良い習慣であるとは思わないでください。何かが含まれ、明らかに攻撃的すぎます。私はしばらく苦労しましたが、最後に、まったく同じソリューションを選択し、アプリケーションを使用してそれらのスキャフォールドスタイルを含め、次にHTMLタグを使用していくつかのオプションの条件付きスタイルを含めました。ありがとう。