Rails 3.1/Compass/sprockets - generating css twice

Using the github versions of the compass rails31 branch and sass-rails:

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

I have created a partial (_base.css.scss) that contains the imports for blueprint/reset and blueprint-typography. I have also a screen.css.scss file that includes my base partial.

When rails compiles this into application.css, I'm seeing my reset and typography css twice.

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
 *= re开发者_如何学Cquire_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; }

I don't really understand what is going on here, and what is the correct configuration to start using compass with rails 3.1

Thanks a lot for your guideline!

---

If you are using

require_tree .

in your application.css manifest it will automaticaly include all files within directory containing this file.

Try the following method in application.css manifest instead of using @import:

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

Also, you may want to put blueprint in vendor/assets/stylesheets instead of app/vendor (which should contain application specific code)

---

Here is my solution, it's maybe not the way It should be done, (I really don't know how to use sprockets) but it seems to work... Please let me know if there is a better way to achieve this.

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

@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...

---

This may not be your case, but one reason why a css gets loaded twice is if you put a file extension (e.g., .css) in your @import statement.