"...">
Geek Answers Handbook

Rails 3.1 / Compass / sprockets - generating css twice

Using github versions of compass rails rails31 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 created a partial (_base.css.scss) which contains the import for the drawing / reset and the typography of the drawing. I also have a screen.css.scss file that includes my base part.

When the rails compile this in application.css, I see twice reset and css typography.

style sheets /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 generally better to create a new file per style scope. *= require_self *= require_tree . */

style sheets / overtones / _base.css.scss

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

style sheets / overtones / screen.css.scss

 @import "partials/_base"; #container { @include container; }

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

Thanks so much for your guidance!

+4
source share
3 answers

If you use

 require_tree .

in your manifest application.css will automatically include all the files in the directory containing this file.

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

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

Alternatively, you might want to include the project in the vendor / assets / stylesheets directory instead of the application / provider (which should contain the application code)

+2
source

Here is my solution, perhaps it is not. This should be done (I really don't know how to use the stars), 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 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...
+1
source

This may not be your business, but one reason css loads twice is if you added a file extension (e.g. .css) to the @import statement.

0
source

More articles:


All Articles