Question

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
 *= 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; }

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!

Answer 1

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)