Yeoman CSS image paths

Question

When I build my Yeoman project (nothing special, I'm only using jQuery and Modernizr), the images used with CSS aren't shown.

My CSS-code

.contact {
    background:url(../icon-contact.png) no-repeat top center;
}

Output after building the app (no difference)

.contact {background:url(../icon-contact.png) no-repeat top center;}

This doesn't work because the filename of icon-contact.png has changed to f91724e0.icon-contact.png.

How can I make sure that the image-paths are updated in the minified CSS-file?

---

Edit: I've added my solution as an answer

Answer 1

Update (24 Feb. 2014)

You can fix this by adding <%= yeoman.dist %>/images to the assetsDirs of the usemin task. See http://www.github.com/yeoman/yeoman/issues/824#issuecomment-32691465

Previous answer (4 Mar. 2013)

There is an issue named "usemin:css" doesn't generate correct image paths for relative urls on GitHub about this particular problem. Tak Tran has made a branch of Yeoman and implemented a fix.

Here is how I removed the current Yeoman installation and installed the branched-version of Tak Tran:

npm uninstall yeoman -g
git clone git://github.com/taktran/yeoman.git
cd yeoman/cli
npm install -g
npm link

Source: https://github.com/yeoman/yeoman/wiki/Additional-FAQ

With this fix, Yeoman wil rename relative image-paths in CSS and my question is answered. Thanks everyone for the help!

Answer 2

In GruntFile.js you need to adapt the usemin task, so that references will be processed:

// update references in HTML/CSS to revved files
    usemin: {
      html: ['**/*.html'],
      css: ['**/*.css']
    },

Check if you have this task config.