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"));
        }
    }
}

So you are using MVC bundling? Could you post: your BundleConfig.cs as well as the code you use to include the CSS on the page itself? — Brad C
– Brad C, Commented May 20, 2015 at 18:38
I use everything out of the box on Visual studio. I believe this uses CSS on the page: @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") and I'll put bundle.cs on the original question... — dave317
– dave317, Commented May 20, 2015 at 18:43
Yep, everything seems to be in order. Your CSS is probably getting cached. If you Control + R in your browser it reloads everything without cache. If that doesnt work, try rebuilding the project since the bundling actually occurs every time the web app starts. — Brad C
– Brad C, Commented May 20, 2015 at 18:53
Clear your cache, or just run your browser in private mode when debugging. — Dayan
– Dayan, Commented May 20, 2015 at 19:00

Peter · Accepted Answer · 2016-02-18 15:52:36Z

14

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.

edited Feb 18, 2016 at 15:52

answered May 20, 2015 at 18:53

Peter

12.8k4 gold badges36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dave317 Over a year ago

Delete bootstrap.min.css from the Visual studio project file or from my web server?

dave317 Over a year ago

That worked great Peter! Is this going to affect the performance of my site in any way? Is there a way to force VS to replace the .min file with the updated bootstrap.css file when I make changes to it?

Peter Over a year ago

Or just try renaming it in your VS project. It might also work to delete it from the web server or rename it and then restart the app pool.

Peter Over a year ago

Great! It shouldn't impact performance greatly since the bundling framework will minify the file for you the first time it is requested (I think). You can also use a VS add-on like Web Essentials to automatically re-minify when you change the base file.

Peter Over a year ago

Generally, though, it might be a better idea to override the style in your site.css file instead of updating it in the bootstrap.css. This way, when bootstrap gets updated you won't have to worry about overwriting your customizations.

Kiky Rodriguez · Accepted Answer · 2018-07-10 14:24:58Z

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.

edited Jul 10, 2018 at 14:24

answered Jul 6, 2018 at 18:43

Kiky Rodriguez

1481 silver badge6 bronze badges

Comments

lakshana haritha · Accepted Answer · 2019-12-01 07:43:43Z

0

i think the problem is bootstrap version. Bootswatch is using bootstrap 4 but the default bootstrap file in the asp.net is using bootstrap version 3 so the class names are not matching correctly so styles are not apply.i downloaded bootstrap version 3 theme it worked for me

edited Dec 1, 2019 at 7:43

answered Dec 1, 2019 at 6:44

lakshana haritha

11 bronze badge

Comments

DevQu · Accepted Answer · 2020-05-28 22:12:37Z

0

I did none of the above and also had the same issue with when publishing Asp.net project , what worked for me was as simple as right click on the css.file and click on include in project and publish that worked for me.

answered May 28, 2020 at 22:12

DevQu

111 silver badge2 bronze badges

Collectives™ on Stack Overflow

CSS changes on MVC App not working

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related