CSS in Rails Asset Path not processed by ERB in development

Question

I have a Rails app with the following in /app/assets/stylesheets/styles.css.erb:

...
#nestedbg {
    background-position: left top;
    background-image: url(<%= asset_path 'siteheader2.png' %>);
    background-repeat: repeat-x;
    background-attachment: fixed;
}
...

When I run rake assets:precompile and then run rails s -e production, everything works as expected. However, when I remove the precompiled assets and run rails s in development, the CSS file comes up as shown above instead of being properly substituted.

I tried putting config.assets.compile = true in /config/environments/development.rb and that did not help.

Any ideas? Thanks.

Answer 1

I honestly cannot say why this is not interpreted correctly in your case, but I have a much better workaround to offer: skip erb interpreting altogether.

You can do this like so:

/* styles.css.scss */
background-image:url(image_path("siteheader2.png"));

If you did not have a chance to I would also suggest to have a look at SASS: it is integrated in the Rails asset pipeline and lets you do cool things like variable declarations, nesting, mixins, ...

Answer 2

I found that my css files wouldn't be processed by ERB unless SCSS processing was also added.

I changed my screen.css.erb to screen.css.scss.erb and now <%= asset_path 'file.png' %> is rendered correctly as /assets/file.png.

I'm on Rails 3.1.3.

Answer 3

I was using Rails 3.1.1 and when I switched the app to use Rails 3.1.3, the problem went away. I switched back to 3.1.1 to see if the issue came back and it did not.

I'm guessing that it was a problem with one of the gems and the update to 3.1.3 brought other gem updates with it.

Answer 4

Bizarrely, I found that changing asset_path to asset_data_uri and then back to asset_path worked for me. Was using Rails 3.1.3 all along.

Strange.

Answer 5

Sam Oliver's advice did the trick for me, simply renaming the extensions didn't update the timestamp on the files.

Answer 6

CSS and ERB

The asset pipeline automatically evaluates ERB. This means that if you add an erb extension to a CSS asset (for example, application.css.erb), then helpers like asset_path are available in your CSS rules:

.class { background-image: url(<%= asset_path 'image.png' %>) }

This writes the path to the particular asset being referenced. In this example, it would make sense to have an image in one of the asset load paths, such as app/assets/images/image.png, which would be referenced here. If this image is already available in public/assets as a fingerprinted file, then that path is referenced.

If you want to use a data URI — a method of embedding the image data directly into the CSS file — you can use the asset_data_uri helper.

CSS and Sass:

When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

image-url("rails.png") becomes url(/assets/rails.png)
image-path("rails.png") becomes "/assets/rails.png".

The more generic form can also be used but the asset path and class must both be specified:

asset-url("rails.png", image) becomes url(/assets/rails.png)
asset-path("rails.png", image) becomes "/assets/rails.png"

Referenced By: Rails Guide Asset Pipe Line

Heading: 2.2.1 and 2.2.2 respectively.