Style bundles in .NET 4.5 and icons in CSS

Question

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.

Answer 1

You need to have your bundles and CSS served from the same place for this to work easily. For example, change your bundle line to be:

bundles.Add(new StyleBundle("~/Content/MySiteCss/").Include(myCss));

And update your reference as well:

@Styles.Render("~/Content/MySiteCss/")