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
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!
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.