asset-url not working in Rails 4

[ghost]

Hi,

I cannot figure out what I am doing wrong here. I am using asset-url with the font declaration in a .scss file and when I compile to .css, nothing changes. The asset-url isn't being parsed. I am hoping this helper picks up the MD5 fingerprint on a production compile as well, but I haven't gotten that far yet.

@font-face {
font-family: 'FontAwesome';
src: asset-url("fontawesome-webfont.eot", font);
src: asset-url("fontawesome-webfont.eot", font) format('embedded-opentype'),
asset-url("fontawesome-webfont.woff", font) format('woff'),
asset-url("fontawesome-webfont.ttf", font) format('truetype'),
asset-url("fontawesome-webfont.svg", font) format('svg');
// src: url('#{$FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
}

Becomes:
@font-face{font-family:'FontAwesome';src:asset-url("fontawesome-webfont.eot", font);src:asset-url("fontawesome-webfont.eot", font)

Thanks.

[rafaelfranca]

I just tested in a fresh Rails application and everything worked fine.

$ cat app/assets/stylesheets/foo.css.scss
@font-face {
font-family: 'FontAwesome';
src: asset-url("fontawesome-webfont.eot", font);
}

$ RAILS_ENV=production bin/rake assets:precompile
I, [2013-10-15T10:23:44.013467 #51979]  INFO -- : Writing /Users/rafaelmfranca/Projects/github/foo/public/assets/fontawesome-webfont-58c7c0e35a67f189e19b8c485930e614.eot
I, [2013-10-15T10:23:44.021548 #51979]  INFO -- : Writing /Users/rafaelmfranca/Projects/github/foo/public/assets/application-268d763ee3d9fa5a009263184a8d78b2.js
I, [2013-10-15T10:23:44.035123 #51979]  INFO -- : Writing /Users/rafaelmfranca/Projects/github/foo/public/assets/application-70f492dda34868b12635652797d6229f.css

$ cat /Users/rafaelmfranca/Projects/github/foo/public/assets/application-70f492dda34868b12635652797d6229f.css
@font-face{font-family:'FontAwesome';src:url(/assets/fontawesome-webfont-58c7c0e35a67f189e19b8c485930e614.eot)}

[bgetting]

I have just tried this in a fresh Rails 4.0.1 app, and it does not work:

Here is what is in my global.css.scss file:

.test {
  background-image:asset-url('overlay.png');
}

When I look at the CSS file that comes out in production, I see:

.test {
    background-image: url(/assets/overlay.png);
}

I've been struggling to link to assets in the SCSS files, as they don't appear to have the digest automatically added to the file name. I've tried a bunch of different scenarios, but the digest URL just doesn't show up in production. I've even tried adding .erb and linking to <%= asset_url('overlay.png') %> but that also shows the non-digest URL in production. Any ideas?

For example, on the same page I have the following, and it links to the digest version:

<%= image_tag 'overlay.png' %>

[rafaelfranca]

Like I commented, I could not reproduce this. Could you provide an example application?

[jpalermo]

We are running into this same problem.

The issue we are having is we want to precompile our assets before pushing to production, but our production environment will not work from where we are compiling assets from.

Running RAILS_ENV=development rake assets:precompile under rails 4 seems to generate only digest assets, but all the image-url calls in SASS files don't include the digest portion (presumably because config.digest = false is set in the development environment).

We could create a new environment just for precompiling assets, but it would be better if it could work out of the box.

[avinmathew]

I had to specifically set RAILS_ENV=production for the image-url calls to use the digest versions. Using development only referenced the non-digest images with SASS.

[rebelwarrior]

I think I'm having a related problem please refer to Bootstrap-sass issue 653 for background.
My application is open-source here: github-Rukh
The relevant code is commented out at the moment. And by the time you look at it I may have reverted to bootstrap-sass 3.1 which didn't have this problem.

In a nutshell:
The Rails 4.1.2 app is looking in:
/assets/bootstrap/glyphicons-halflings-regular.woff
yet asset in production is called:
/assets/bootstrap/glyphicons-halflings-regular-{digest}.woff
The request is missing the digest part.

The asset w/ the digest exists. Just Rails doesn't look for it for some strange reason. In diagnosing this I moved the fonts to assets/fonts and used the font-url call in my scss file. The location changed, but the request sans-digest persisted.

[glebm]

Rails expects precompilation to happen in production (e.g. on deploy). Digests are controlled by config.assets.precompile. To get them in development, you could set config.assets.digest = !!ENV['DIGEST_ASSETS'] in development.rb and precompile with DIGEST_ASSETS=true rake assets:precompile.

[toymachiner62]

I'm also experiencing this problem. Assets are precompiled with a digest appended to the name but asset_url('myImage.png') does not get translated to point at the compiled version with a digest appended.

[Eptis]

Had the same problem, fixed it by enabling config.assets.css_compressor = :sass in production.rb

[ryannealmes]

@Eptis you are a legend! Seriously. Come to South Africa and I will buy you a beer!

[Eptis]

Well South Africa is on my schedule for this year so I might take you up on that offer ;)

[ryannealmes]

Ping me any time :)

[hangmiao]

I run into the exact same problem:
Inside the public/assets/application-*.css, it refers to non-digest file names while the files in public/assets/fonts are all with digest file names. So the sever couldn't find it.

To solve it:

1. Change the css file to css.scss file (it was a css file before)
2. Change src: url to src: asset-url and other places correspondingly
3. Enable config.assets.css_compressor = :sass in production.rb as @Eptis mentioned

The public/assets/application-*.css now refers to digest file names.
😄