在MVC应用程序的CSS变化不工作 [英] CSS changes on MVC App not working

问题描述

我创建使用VS防爆preSS用于Web的MVC应用程序。它只会使用内置在VS防爆preSS自带的CSS文件的默认。结果
例如：如果我修改bootstrap.css文件（改变颜色超大屏幕），并从VS本地运行，变化是明显的，但是当我部署网页，没有这些变化是显而易见的。当我修改web.config文件来调试=假的我也注意到，我所做的CSS的变化并不明显，当我从VS（和网络部署）在本地运行。

CSS仍然被应用，但是我做不应用任何更改。该网站显示了旧的默认颜色的超大屏幕。如果我改变调试=真正在web.config那么超大屏幕显示我的新颜色。应用时，我的Web部署我的网站没有的CSS的变化，它仍然使用默认的CSS文件，我甚至查bootstrap.css在服务器上，它显示了更新的超大屏幕颜色，但超大屏幕仍然是在网络上的默认颜色??超级混乱。

我已经做了很多的阅读，尝试添加以下到我的web.config：

 ＆LT;清除NAME =BundleModule/＆GT;
＆LT;添加名称=BundleModuleTYPE =System.Web.Optimization.BundleModule/＆GT;
 

但是，这并不固定。我想从我的文件名删除的CSS，这个固定的问题，当我从本地使用VS调试=假的运行它，但是当我发布网站的网站显示没有CSS样式可言。这不是一个缓存的问题。这是值得做捆绑和调试=假的，但我不知道是什么。我还是挺新的网页/ MVC开发。我已经更新了我用的NuGet web.optimization和microsoft.aspnet等。

我有一个很艰难的时期这一点，如果任何人有一个建议，它的作品，我会很开心的！有很多对堆栈溢出这个职位，但没有的建议还没有为我工作。

这是我的bundle.config.cs：

 使用的System.Web;
使用System.Web.Optimization;命名空间HFHYYC
{
        公共类BundleConfig
        {        公共静态无效RegisterBundles（BundleCollection包）
        {
            bundles.Add（新ScriptBundle（〜/包/ jQuery的）。包括（
                    〜/脚本/ jquery- {}版本的.js））;            bundles.Add（新ScriptBundle（〜/包/ jqueryval）。包括（
                    〜/脚本/ jquery.validate *））;            bundles.Add（新ScriptBundle（〜/包/ Modernizr的）。包括（
                    〜/脚本/ modernizr- *））;            bundles.Add（新ScriptBundle（〜/包/引导）。包括（
                  〜/脚本/ bootstrap.js
                  〜/脚本/ respond.js））;            bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
                  〜/内容/ bootstrap.css
                  〜/内容/的site.css））;
        }
    }
}
 

解决方案

这可能是由于使用 bootstrap.css 本地/调试模式和捆绑框架 bootstrap.min.css 当你部署。该框架使用了一组确定哪些文件添加到一个包，其中之一是使用文件的.min版本，如果存在的话，对于发布版本时约定。这可能是发生了什么咬你。你取得了bootstrap.css但不是在bootstrap.min.css的变化。

尝试删除 bootstrap.min.css 和重新部署。这应该强制frameworkt来缩小并使用您修改的 bootstrap.css 文件。

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

解决方案

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.

这篇关于在MVC应用程序的CSS变化不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！