Question

I have the following setup:

app/assets/stylesheets/application.css.scss

/*
*= require_self
*= require fancybox
*/

/* COLORS.. */
/* MIXINS... */
/* FONT STACKS... */

/* IMPORTS */
@import "reset";
@import "supergrid";
@import "rails";
@import "app";
@import "forms";
@import "layout";

In my various partials I’m having a real problem with the asset paths. When inside application.css.scss or anything loaded by the manifest, I can use:

.example { background-image: image-path("background.png"); }

However, when I’m using a partial, such as my _layout.css.scss partial, when I try the same thing the background-image property is simply omitted from the compiled file. It seems the SCSS asset helpers are not available inside partials?

Has anyone gotten this to work, am I missing something obvious? Or is it simply impossible to use asset helpers in partials? If so this is a major, MAJOR problem, as my entire app structure depends on SCSS variables and mixins which are shared among the partials.

I know that variables and mixins are not shared across the sprockets manifest, so if partials cannot access the asset helpers then I’m looking at having to concatenate everything into a single scss file, which pretty much defeats the purpose of both Sass and Sprockets.

Any help would be very much appreciated!

Answer 1

Strange, it should work.. Just few ideas:

1. Are you using up-to-date gems sass-rails and sprockets?
2. Try to rename .css.scss to .scss
3. Try to replace image-path('background.png') with asset-url('background.png', image) or image-url('background.png')
4. Try to remove require_self from application.css.scss
5. Try to remove all directives from application.css.scss and import those files with @import