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(/a         


        

Answer 1

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.

Answer 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.

Answer 3

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.

Answer 4

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.

Answer 5

I've been banging my head against this for days. The only solution that worked for me was as follows:

1. Make sure sass-rails to your :development group in your Gemfile.

2. If that doesn't fix it, add the following to a new file in config/initializers/ called something like "horrible_sass_patch.rb":

   begin
     require 'sass-rails'
   rescue
   end
   
   if Class.const_defined? "Sass::Script::Functions"
     module Sass::Script::Functions
       # This function exists, but doesn't automatically register
       declare :asset_url, [:value]
       declare :image_url, [:value]
       declare :font_url, [:value]
       # ... etc
     end
   end
   

Note: This requires that you are using the "active" Bundler loading mechanism, i.e. your application.rb uses the following:

Bundler.require *Rails.groups(:assets => %w(development test))

... and if your stylesheets are in vendor, make sure they're included in Sass's configuration:

if config.respond_to? :sass
  config.sass.load_paths << Rails.root.join('vendor', 'assets', 'stylesheets')
end

Answer 6

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)