CSS changes in MVC app not working

I have created an MVC application using VS Express for the web. It will only use the default inline CSS file that VS Express ships with.
Example: If I change the bootstrap.css file (change the jumbotron color) and run locally from VS, the changes are obvious, however, when deploying to the web, none of these changes are obvious. I also noticed that when I change the web.config file to Debug = false, the CSS changes I made are not explicit when I run it locally from VS (and when deploying to the web).

The CSS is still being applied however any changes I make are not being applied. The site shows the old default jumbotron color. If I change debug = true in web.config then jumbotron shows my updated color. When I deploy the website to 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 standard color on the Internet ?? Super embarrassing.

I did 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 doesn't fix it. I tried to remove the .css from my filenames, this fixed the problem when I run it locally from VS using debug = false, however, when publishing the site, the site does not show any CSS styles at all. This is not a caching issue. It has something to do with grouping and debug = false, but I don't know what. I am still new to web / MVC development. I have updated my web.optimization and microsoft.aspnet etc. With NuGet.

This is very difficult for me, if someone has a suggestion and it works, I will be very happy! There are many posts about this in Stack Overflow, but none of the suggestions have worked for me yet.

This is my bundle.config.cs file:

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

      

+3


source to share


1 answer


This is probably due to the binding infrastructure using bootstrap.css

in local / debug mode and bootstrap.min.css

on deployment. Within the framework, a set of conventions is used when determining which files to add to the package, one of which is to use the .min version of the file, if it exists, for the release versions. It probably bites you. You made changes to bootstrap.css, but not to bootstrap.min.css.



Try deleting bootstrap.min.css

and redeploying. This should force the frameworkt to minify and use the file bootstrap.css

you modified.

+9


source







All Articles