ruby-on-rails-3 - Rails 3.1/Compass/sprockets - css を 2 回生成する

Question

Compass rails31 ブランチと sass-rails の github バージョンを使用します。

gem "sass-rails", :git => "https://github.com/rails/sass-rails.git"
gem "compass", :git => "https://github.com/chriseppstein/compass.git", :branch => "rails31"

blueprint/reset および blueprint-typography のインポートを含むパーシャル (_base.css.scss) を作成しました。ベース部分を含む screen.css.scss ファイルもあります。

Rails がこれを application.css にコンパイルすると、リセットとタイポグラフィの css が 2 回表示されます。

stylesheets/application.css.scss

/*
 * 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 .
*/

stylesheets/partials/_base.css.scss

@import "blueprint/reset";
@import "blueprint/typography";

@include blueprint-typography;

stylesheets/partials/screen.css.scss

@import "partials/_base";

#container { @include container; }

ここで何が起こっているのかよくわかりません.Rails 3.1でコンパスを使い始めるための正しい構成は何ですか?

ガイドラインありがとうございます！

score 2 · Accepted Answer

使用している場合

require_tree .

application.css マニフェストでは、このファイルを含むディレクトリ内のすべてのファイルが自動的に含まれます。

@import を使用する代わりに、application.css マニフェストで次の方法を試してください。

/*
  *= require blueprint/src/reset
  *= require blueprint/src/typography 
  *= require_self
  *= require_tree . 
*/

また、アプリ/ベンダー (アプリケーション固有のコードを含む必要があります) ではなく、ベンダー/アセット/スタイルシートに設計図を配置することもできます。

score 1 · Accepted Answer

これが私の解決策です、それはおそらくそれが行われるべき方法ではありません（スプロケットの使用方法が本当にわかりません）が、うまくいくようです...これを達成するためのより良い方法があれば教えてください.

アプリケーション.css.scss

/*
 * 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 .
*/

@import "blueprint/reset";
@import "blueprint/typography";

@include blueprint-typography;

screen.css.scss

@import "blueprint";
@import "partials/_base";

#container { @include container; }

_base.css.scss

# Columns or colors variables goes here...

score 0 · Accepted Answer

これはあなたの場合ではないかもしれませんが、css が 2 回読み込まれる理由の 1 つは、@import ステートメントにファイル拡張子 (.css など) を入れた場合です。