How to Use Reference Images in SASS When Using Rails 3.1

How do I use reference images in Sass when using Rails 3.1?

The following should do the trick:

.button.checkable { background-image: url(image_path('tick.png')); }

Rails in fact provides a bunch of helpers to reference the assets:

image-url('asset_name')
audio-path('asset_name')

In general

[asset_type]-url('asset_name') #Becomes url('assets/asset_name')
[asset_type]-path('asset_name') #Becomes 'assets/asset_name'

asset_type may be one of the following: image, font, video, audio, javascript, stylesheet

Rails 3.1 asset urls in SCSS files do not seem to be referencing the assets correctly

I have tried various solutions. The most elegant one was the following:

.foo {
   background-image: url('foo.png')
}

which automatically converted to url('/assets/foo.png') by the SCSS compiler.

Ruby on Rails 6 how to reference images from asset pipeline for css

A quick fix solution that should work:

1. Rename the css file to use .scss (SASS extension)
2. Then use image-url

This should work without fault and will allow you to use the rails helper functions.

What is the correct path to use for a background image in a css file in a Rails application that takes advantage of the asset pipeline?

Both PATHS are correct to use in css.

With reference to rails 3.2.13.
Sass-Rails internally uses asset-url's logic same as asset_path(rails helper method). And image-url calls rails image_path helper method which again calls asset_path of rails helper method. So both methods are just calling asset_path of rails helper and you can use either one. So there is only syntax difference.

P.S.- Any feedback or input is most welcome.

Rails 3.1 SASS asset helpers not not including RAILS_RELATIVE_URL_ROOT / relative_url_root

After a bit of digging around, I have found the issue. The issue is in Rails, specifically Sprockets::Helpers::RailsHelper::AssetPaths#compute_public_path. Sprockets::Helpers::RailsHelper::AssetPaths inherits from ActionView::AssetPaths and overrides a number of methods. When compute_public_path is called through the Sass::Rails::Resolver#public_path method is sass-rails, the rails sprocket helper picks up the task of resolving the asset. Sprockets::Helpers::RailsHelper::AssetPaths#compute_public_path defers to super which is ActionView::AssetPaths#compute_public_path. In this method there is a condition of has_request? on rewrite_relative_url_root as seen below:

def compute_public_path(source, dir, ext = nil, include_host = true, protocol = nil)
  ...
  source = rewrite_relative_url_root(source, relative_url_root) if has_request?
  ...
end

def relative_url_root
  config = controller.config if controller.respond_to?(:config)
  config ||= config.action_controller if config.action_controller.present?
  config ||= config
  config.relative_url_root
end

If you look at the internals of rewrite_relative_url_root it relies on a request to be present and the ability to derive it from the controller variable in order to resolve the relative url root. The issue is that when sprockets resolves these assets for sass it does not have a controller present and therefore no request.

The solution above didn't work in development mode for me. Here is the solution that I am using to make it work for now:

module Sass
  module Rails
    module Helpers
      protected
      def public_path(asset, kind)
        resolver = options[:custom][:resolver]
        asset_paths = resolver.context.asset_paths
        path = resolver.public_path(asset, kind.pluralize)
        if !asset_paths.send(:has_request?) && ENV['RAILS_RELATIVE_URL_ROOT']
          path = ENV['RAILS_RELATIVE_URL_ROOT'] + path
        end
        path
      end
    end
  end
end

Background images with asset pipeline

I suspect a very simple reason for your troubles: indentation. Most of the times in scss it happens that there is no space after the statement, in your case background:. Try also this in your scss prefixed file:

background: url(dna.jpg);

It always works for me.

---

Related Topics