ASP.NET MVC 4 Minification & Background Images

Question

I\'m currently using ASP.NET MVC 4 CSS/JavaScript Optimizer. It works good with my own CSS/JavaScript, but I also want to use it with plugins. Each plugin has its own folder

Answer 1

I had the same problem... I used to bundle jQuery UI CSS with my own, but as you mentioned, plug-ins uses it's own directory. In my case it was:

~/Content/Site.css
~/Content/themes/base/*.css

This minified bundle looks for all images in ~/Content/ so the jQuery UI stops working properly. So the only way to resolve this is to separate these CSS (my own and the jQuery UI one).

BTW: Before that, I didn't understand why the CSS are bundled (in MVC4 template) as ~/content/ instead of ~/bundles/. Now I know that it is because of problem with path to the images in Content directory.

Answer 2

Might have a look at RequestReduce. It's another .net based minifier/bundler and it will rewrite all urls in the minified/bundled css to be absolute. This includes fonts and background images. It will also automatically expand any imports in the css. Additionally, where it thinks it can, it will sprite the background images.