Publishing a website is not updating my CSS bundles

Question

When I run my code from Visual Studio in release mode, and check the bundled style sheet, I can see my updates to the css files in that bundle. However when I publish the website to the server or my local machine, my changes in the style sheets have not come through. The bundled style sheet is still the old one.

I have tried an IIS reset, a clean build/rebuild, deleted all files from the IIS folder and re-published.

I am using LESS if that makes any difference.

My bundle config:

bundles.Add(new StyleBundle("~/bundles/requiredStyles").Include(
    "~/Content/Style/Libs/bootstrap.min.css",
    "~/Content/Style/Libs/font-awesome.min.css",
    "~/Content/Style/Globals/application.css",
    "/Content/Style/Libs/muliDropdown.css",
    "~/Content/Style/Libs/smoothDivScroll.min.css",
    "~/Content/Style/Libs/jasny-bootstrap.min.css"
));

I'm checking the bundled css by visiting http://www.mywebsite.com/bundles/requiredStyles

So I made a change in application.css which is fine if I hit play in visual studio (in release mode), but when I publish to my local IIS, my change is no longer there.

Zel

Answer 1

This can happen if you have a minified version of a css file in the same directory as your unminified file.

For example, if you have the following files:

    ~/Content/bootstrap.css
    ~/Content/bootstrap.min.css

in your directory, and you register the "bootstrap.css" file in your bundle, the optimizer will first attempt to use the "bootstrap.min.css" file during publish. If you only updated the "bootstrap.css" file and did not update the "bootstrap.min.css" file, you will get the old styles from "bootstrap.min.css". You can fix this problem by deleting the "bootstrap.min.css" file or by updating it.

This does not happen in a debug build because it does not pull the minified files if your compilation is set for debug using the following:

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

You can also overwrite the web.config setting by disabling the optimizations via:

    BundleTable.EnableOptimizations = false;

This would go inside your BundleConfig.cs file.

Underhand

Answer 2

In my case bootstrap.min.css also exists in content folder which I removed it and web site working fine.

as per Filip Stanek mentioned "the optimizer will first attempt to use the "bootstrap.min.css" file during publish"

even if we didnt add it in bundle config while publishing code it point to "bootstrap.min.css"

Twosided

Answer 3

I recently encountered a similar issue with bundling. I use angularJS in a webapi project in visual studio.

My web.config had debug set to true. I set it to false. No change.

Then I tried setting my compiler conditions to true (in global.asax.cs|app...start method):

'#if DEBUG'
        'BundleTable.EnableOptimizations = true;'
'#else'
        'BundleTable.EnableOptimizations = true;'   
'#endif'

That did not work either.

Finally I ended up moving the referenced/missing file (a <controllerName>.js) in the bundle to another place in the stack. When I debug I uncomment the file from the bundle because I include it directly in the index.html. It's possible that VS did not compile the change when I restored it.

' bundles.Add(new ScriptBundle("~/SomeBundleName.js")
           .Include("~/Scripts/IWASMissingIntheBundle.js")
           .Include("~/Scripts/IWASNEVERMISSINGANDstillhere.js")
           .Include("~/Scripts/MOVEDIWASMissingHEREANDNOWImFound.js")'

My proposition is that the compiler did not pick up the change and regardless of cleaning and rebuilding still did not. After moving the file and republishing it seemed to work.

But also I cleared the cache in my browser, not just from the "Clear Cache" button that I use in Chrome, but also from the debugger|Network panel. Some stepping through the above should help.

Arjan