I'm beginning to use .NET 4.5's built in minification and bundling to minify & bundle my CSS and JavaScript. JavaScript minification works great, however, I have run into trouble with CSS minification. I create a style bundle using the below code -
var myCss = new string[]
{
"~/Content/jquery.css",
"~/Content/app.css",
};
bundles.Add(new StyleBundle("~/bundles/MySiteCss/").Include(myCss ));
and then I reference them in .cshtml (razor file) as below -
@Styles.Render("~/bundles/MySiteCss/")
It minifies the CSS file. However, if the CSS files contain styles that have background-image references, such as background-image: url('img/icon.png'), it attempts the load this icon file from a new location (derived from the bundle name) = /bundles/MySiteCss/img/icon.png
Since the icon does not exist in the location, it doesn't get loaded and displayed on the page.