1

When I put my website in production using git push heroku master the url in my CSS does not refer to the right image url.

Here is my situation in development environment :

  • app/assets/images/logo.png is present
  • app/views/layouts/application.html.erb : <%= stylesheet_link_tag "style" %>
  • app/assets/stylesheets/style.css : background: asset-url("logo.png");

Here is my situation in production (when I "View Page source") :

  • I don't know how to find logo.png ?
  • Link to my CSS : <link href="/assets/style-75a5c3912777c4b39ba92d1893ac7815.css" media="screen" rel="stylesheet" />
  • In my (compressed) CSS I can find : background:asset-url("logo.png");

For the others images called directly from app/views/* it's ok (<%= link_to image_tag("xxx.png") %>)

In config/environments/production.rb I have :

config.assets.precompile += ['style.css']
config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
config.assets.digest = true
config.assets.compile = true
config.serve_static_assets = true

I'm following this great tutorial.

ZazOufUmI
  • 3,212
  • 6
  • 37
  • 67
  • so what does URL does it refer to in production? because if your compiled CSS still says `asset-url('logo.png')`, you're doing something very wrong. – sevenseacat Aug 19 '14 at 08:30
  • CSS still says asset-url('logo.png') .... :/ – ZazOufUmI Aug 19 '14 at 08:33
  • @ZazOufUmI How are you making url for your image? are you sure logo.png is present in app/assets/images and not app/assets/images/some_folder because. if it's in images folder then asset-url or image-url will make proper paths for you – Mandeep Aug 19 '14 at 08:34
  • are you compiling the CSS file from sass/scss? They provide the `asset-url` helper methods for you. – sevenseacat Aug 19 '14 at 08:51
  • I updated my request. Yes @sevenseacat I used those commands once to help me resolved another issue : http://stackoverflow.com/questions/19695809/heroku-css-not-loading-after-assetsprecompile/19696598#19696598 – ZazOufUmI Aug 19 '14 at 09:00
  • possible duplicate of [invalid css on rails app Michael Hartl tutorial](http://stackoverflow.com/questions/18839662/invalid-css-on-rails-app-michael-hartl-tutorial) – Brad Werth Aug 24 '14 at 04:24

2 Answers2

3

SCSS

The problem, from what I can see, is that you're not using any CSS preprocessors (SCSS / SASS), cancelling out the ability for the Rails helper asset-url.

I'd do this to start with:

#app/assets/stylesheets/style.css.scss
background: asset-url("logo.png");

Asset Pipeline

This will make sense if you look at how the asset pipeline works

Basically, the asset pipeline is a place to put all your css / image / javascript files, which your application can call, either statically or dynamically. Whilst in development, the asset_pipeline works very well to provide you with a central location for all your files -- all being called dynamically.

--

Production

The "problems" happen when most people want to use the asset pipeline in production. Production generally requires static assets, which means precompilation:

In the production environment Sprockets uses the fingerprinting scheme outlined above. By default Rails assumes assets have been precompiled and will be served as static assets by your web server.

Asset precompilation is when Rails will "compile" your CSS / Image / Javascript files into a series of "minified" versions - making them much more efficient to load

The problem with the precompilation process is actually loses all the "dynamic" aspects of the files, meaning if you want to include things like asset-url, you'll need to use a preprocessor to manage the dynamic aspects of these files.

Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • Thank you for your explanations. I precompiled my code using bundle exec rake assets:precompile RAILS_ENV=production but the problem is always here. I don't get how to bypass this :/ – ZazOufUmI Aug 19 '14 at 19:42
  • you're not using sass, which provides the helpers. – sevenseacat Aug 20 '14 at 03:23
1

I resolve my problem thanks to multiple answers found here and somewhere else (can't found where anymore sorry). Here is my solution to make things work without putting all my ressources into the public folder.

  1. I deleted all ressources from public/images & stylesheets & javascript
  2. I renamed my style.css to style.css.scss.erb
  3. I replace every background: url("../images/xxx.png"); to background: url(<%=asset_path "xxx.png"%>); from my CSS
  4. I executed this command before pushing into production : bundle exec rake assets:precompile RAILS_ENV=production

Thanks @RichPeck for your post which helps me to understand the process of assets pipelines

ZazOufUmI
  • 3,212
  • 6
  • 37
  • 67