The HTML references my CSS differently based upon deployment machine

Question

My MVC 4 site adds the CSS files using the Bundle.Config class

bundles.Add(new StyleBundle("~/Content/Styles").Include(
  "~/Content/css/website.css", 
  "~/Content/css/banner.css"));

On my localhost, when I view the source code, the HTML files render as

<link href="/Content/css/website.css" rel="stylesheet"/>
<link href="/Content/css/banner.css" rel="stylesheet"/>

I have now deployed my site live, but the source code renders just 1 line

<link href="/Content/Styles?v=fxCdHAOgPDvcROxkMfEwGQggO9uCfzckN3PaN8BOIzI1" rel="stylesheet"/>

Oddly, most of the CSS still displays (but images do not).

I assume the issue isn't with my web.config file since both local and live share the same file.

My question is, how do I remove this behavior and have the live server render the HTML in the same way as my local host?

Answer 1

Bundling minifies your css into one file, to make your images work you need to set the bundle so the ~/Content/Styles is relative to your actual css so set it to something like ~/Content/css/Styles

Have a look at this post if you don't want bundling to occur on your deployed site

Answer 2

public class LessTransform : IBundleTransform { public void Process(BundleContext context, BundleResponse response) { response.Content = Less.Parse(response.Content); // Breakpoint here. response.ContentType = "text/css"; } }