Sass-rails helpers "image-url", "asset-url" do not work on rails 3.2.1

Question

I'm 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 changing 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 know why these helpers don't work?

Answer 1

Despite what the documentation says, the default options in rails 3.2.6 seem to let you just work with even less path information in your CSS. For example. ../app/assets/images/rails.png are the links in the example.css.scss file with something like:

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

You do not include image-url or asset-url in your scss (as far as I know), just url(your_image.png) . This piece of documentation seems to be just an explanation of what it does in the background.

Answer 2

When I hit this problem, it happened because I did not include the css file in the pipeline for precompilation. As a result, it will be generated at runtime. Since the sass-rails stone is usually in the: assets group, helpers are not available 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 a fix for this post , including gotcha, naming the files when adding them to the precompiler.

Answer 3

If you upgraded your application to Rails 3.1 in the past, make sure you modify the application.rb file with

 # 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 when upgrading to Rails 3.1 and adding an 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) 

Answer 4

Have you included the asset pipeline in application.rb ?

 config.assets.enabled = true 

You did the right thing by installing the extension on the Sass styles for .css.scss styles. This lets Rails know to first parse the file with Sass before it renders the content as CSS.

Answer 5

You might want to try clearing / tmp / cache. I'm too new to Rails and Sass to understand why this worked, but I solved this problem for me after hours of searching.

By the way, this worked, despite the fact that I could see other Sass directives, such as setting variables and calculating with them, execution. I am sure there is a very simple explanation as soon as I can track it.

Answer 6

I made the changes suggested by @Ryan and also updated sass-rails:

 bundle update sass-rails 

sass 3.2.6 worked for me, but 3.2.5 did not.

Answer 7

We had the same problem, and I fixed it, explicitly requiring asterisks in the Gemfile (although this is an ActionPack dependency):

 group :assets do gem 'sprockets' gem 'sass-rails', '~> 3.2.3' # ... end 

I don’t know why, but now it works .; -)

Answer 8

I banged my head about this for several days. The only solution that worked for me was as follows:

• Make sure sass-rails for your development team is in your Gemfile.

• If this does not fix, add the following to a new file in config / initializers / called "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 use the "active" Bundler boot mechanism, i.e. your application.rb uses the following:

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

... and if your stylesheets are in the provider, make sure they are included in the Sass configuration:

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