sass-rails helpers "image-url", "asset-url" are not working in rails 3.2.1

Question

I am on 3.2.1, with sass-rails-3.2.4 and sass-3.1.15...

The documentation for the asset pipeline says:

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

...

So I made the following file:

# app/assets/stylesheets/public/omg.css.sass

body
  background: asset-url('snake.gif', image)

#lol
  background: image-url('snake.gif')

and when I visit localhost:3000/assets/public/omg.css I get:

body {
  background: asset-url("snake.gif", image); }

#lol {
  background: image-url("snake.gif"); }

... I also tried changing the file to omg.css.scss and changed the syntax to:

# app/assets/stylesheets/public/omg.css.scss

body {
  background: asset-url('snake.gif', image);
}

#lol {
  background: image-url('snake.gif');
}

but get the same results... does anyone have any idea why these helpers are not working?

Solution 1

Despite what the documentation says, it seems the default options in rails 3.2.6 allow you to just make things work with even less path information in your CSS. E.g. ../app/assets/images/rails.png is references in your example.css.scss file with something like:

background: white url(rails.png) repeat-y;

You don't include the image-url or asset-url into your scss (as far as I know), just plain url(your_image.png). That bit of documentation appears to be just an explanation of what it is doing in the background.

Solution 2

When I hit this problem, it was because I had not included the css file in the asset pipeline for pre-compilation. As a result, it would be generated at runtime. Because the sass-rails gem is commonly in the :assets group, the helpers are unavailable when generating css files at runtime.

Try adding the following line to your application.rb (or production.rb):

config.assets.precompile += %w( public/omg.css )

I found the fix on this post including a gotcha around naming the files when adding them to the precompiler.

Solution 3

If you have updated your app to Rails 3.1 in the past, make sure you changed your application.rb file from

# If you have a Gemfile, require the gems listed there, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env) if defined?(Bundler)

to

if defined?(Bundler)
  # If you precompile assets before deploying to production, use this line
  Bundler.require *Rails.groups(:assets => %w(development test))
  # If you want your assets lazily compiled in production, use this line
  # Bundler.require(:default, :assets, Rails.env)
end

See this railscast on upgrading to Rails 3.1 and adding the asset pipeline.

Update: Rails 4 goes back to the old way of doing it. Thanks Aaron Gray!

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(:default, Rails.env)

Solution 4

Have you enabled the asset pipeline in application.rb?

config.assets.enabled = true

You did right by setting the extension on your Sass stylesheets to .css.scss. That lets Rails know to parse the file with Sass first before it emits the content as CSS.

Solution 5

I made the change suggested by @Ryan, as well as upgrading sass-rails:

bundle update sass-rails

sass 3.2.6 worked for me, while 3.2.5 did not.

View more solutions

Comments

[Amir Raminfar]

Did you ever find a solution for this?

[Forrest]

My project has 2 stylesheets (one for the webpage & one for the app). I'm having this problem on one, but not on the other?

[Brandan]

I created a similar file at a similar location and got the correct output. Do you have sass-rails in your Gemfile? Can you update your original post with the contents of config/environments/development.rb?

[dignoe]

Using just url(rails.png) doesn't use the fingerprinted version of the asset file. In our .css.scss files, we needed to use background: image_url('my-image.png').

[Aaron Gray]

Once you go to Rails 4 though, you'll want to go back to the old way of using Bundler.require(:default, Rails.env). See railscasts.com/episodes/415-upgrading-to-rails-4.

[cdaloisio]

If you need to get the fingerprinted output, make sure that you don't do this: rake assets:precompile. You need to have the production environment set, like this RAILS_ENV=production rake assets:precompile otherwise it will just generate the assets links for development mode.

[Mutmatt]

^^ that comment doe!!! Saved me HOURS of head ache RAILS_ENV=production rake assets:precompile

[Bozic Nebojsa]

Finally good answer: just use url(your_image.png). Thx @Jay H.

[Raj Kumar Goyal]

Convert css to scss may help and use @import in application.scss