26

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

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 で何かを行う必要がありますか? もしそうなら、どのように？

第 2 に、IE8 をチェックして blueprint/ie.css をロードするための何らかの条件をどのように提供すればよいでしょうか?

編集：

うーん、アプリのウェブページを再読み込みしています。Rails 3.1 には Blueprint ファイルが含まれています。css ファイルがフォルダー内にある場合でも (この場合: app/assets/stylesheets/blueprint.)

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

  1. SASSを使用してif lt IE 8条件をどのように適用する必要がありますか?
  2. SASS を使用して印刷形式 (つまり、<%= stylesheet_link_tag 'blueprint/print', 'media' => 'print' %>) の css ファイルをロードするにはどうすればよいですか?
4

7 に答える 7

24

他の誰かが私が最後にどうやってそれをしたのか疑問に思っているなら.

私は削除しました

 *= 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]-->
...

これが誰かに役立つことを願っています。

于 2011-06-08T06:24:27.650 に答える
6

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

詳細については、簡単な Google 検索で見つけたブログを参照してください: http://www.rubyinside.com/how-to-rails-3-1-coffeescript-howto-4695.html

IE8のことは。常に条件を実行するとは限らないIEのバグがあったので、試してみてください

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

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

于 2011-05-24T18:51:55.210 に答える
5

物事を行う別の方法：

app / asset / 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)
于 2011-06-29T17:04:14.027 に答える
5

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' には含まれていません)。したがって、それらを次の場所に追加する必要があります。

/構成/環境/production.rb

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

次に実行します。

bundle exec rake assets:precompile
于 2012-01-24T03:09:44.180 に答える
2

あなたのソリューションに絶対に同意します。「require_tree」がapplication.cssの良い習慣だとは思わないでください。何でも含まれます。どうやら攻撃的すぎるようです。私はしばらく苦労しましたが、最後に、まったく同じソリューションを選択し、アプリケーションを使用してそれらの足場スタイルを含め、次に HTML タグを使用していくつかのオプションおよび条件付きスタイルを含めました。ありがとう。

于 2011-09-06T07:36:57.410 に答える
-1

翻訳されたSASSファイルの最終結果は実際にはcssファイルであるため、スタイルシートを含める方法は変更されません。

さらに、SASS gemが有効になっているからといって、プレーンなバニラcssファイルを同時に使用できないわけではありません。したがって、ブループリントのcssファイルを含めても問題はありません。

ただし、純粋にSASSに移行したい場合は、設計図を適切にサポートしているコンパスgemを確認することをお勧めします。

http://compass-style.org/

また、ie固有のスタイルシートとマクロのサポートも含まれています。

于 2011-05-24T18:52:03.857 に答える