CSS changes on MVC App not working

Question

I created an MVC app using VS Express for web. It it will only use the default built in CSS file that VS Express comes with.
Example: If I modify the bootstrap.css file (change jumbotron color), and run locally from VS, the changes are apparent, however when i web deploy, none of those changes are apparent. I also noticed when I modify the web.config file to Debug=false, the CSS changes I've made are not apparent when I run it locally from VS (and on web deploy).

CSS is still being applied, however any changes I make are not applied. The site shows the old default jumbotron color. If I change debug=true in the web.config then the jumbotron shows my updated color. When I web deploy my site none of the CSS changes are applied, it still uses the default CSS file, I even checked bootstrap.css on the server and it shows the updated jumbotron color, but the jumbotron is still the default color on the web?? Super confusing.

I have done a lot of reading, tried adding the following to my web.config:

<remove name="BundleModule" />
<add name="BundleModule" type="System.Web.Optimization.BundleModule" />

but that doesnt fix it. I tried removing .css from my file names, this fixed the problem when I run it locally from VS using debug=false, however when I publish the website the site shows no CSS styles at all. It is not a caching issue. It is something to do with bundling and debug=false, but I do not know what. I am still quite new to web/MVC development. I've updated my web.optimization and microsoft.aspnet, etc with NuGet.

I am having a really hard time with this, if anyone has a suggestion and it works I will be very happy! There are lots of posts about this on Stack Overflow but none of the suggestions have worked for me yet.

This is my bundle.config.cs:

using System.Web;
using System.Web.Optimization;

namespace HFHYYC
{
        public class BundleConfig
        {

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
        }
    }
}

Solution 1

This is likely due to the bundling framework using bootstrap.css in local/debug mode and bootstrap.min.css when you deploy. The framework uses a set of conventions when determining which files to add to a bundle, one of which is to use the .min version of a file, if it exists, for release builds. This is probably what's biting you. You made the change in bootstrap.css but not in bootstrap.min.css.

Try deleting bootstrap.min.css and re-deploying. This should force the frameworkt to minify and use the bootstrap.css file that you modified.

Solution 2

This issue drove me crazy until I read someone's comment about cached browser data! In FireFox, I used ctrl-r to reload the page and everything came up as expected. Long story short, always clear your cache before checking for published style changes.

In terms of my azure website, I went into the portal and stopped and restarted the service and this seemed to force a style refresh for users.