In my project we have CSS files in different directories, as well as other stylesheets from vendors such as twitter bootstrap and font awesome. When in production environment, we're trying to minify and concat all stylesheets into a single one. For this, I'm using grunt-contrib-cssmin in Grunt. It works, but the link to font-awesome font files breaks. This is due to the original CSS files refering to fonts in specific directories. For instance, in font awesome:
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
Right now I have my grunt-contrib-cssmin configured like this:
cssmin: {
target: {
files: {
'web/assets/css/app.css': [
'public/assets/font-awesome/css/font-awesome.min.css',
'public/assets/bootstrap/dist/css/bootstrap.min.css',
'public/assets/select2/dist/css/select2.min.css',
'public/assets/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css',
'public/assets/css/*.css'
]
}
}
}
Naturally, as font-awesome code will now reside in web/assets/css/app.css, it wil expect its fonts to be in web/assets/fonts/. I could simply use grunt to copy all fonts to this directory but if some resource is expected to be found in fonts/somethingelse it will break again.
How can I keeps all files in the right places, or fix the CSS code to refer to the correct file?
