twitter-bootstrap MVC 应用程序上的 CSS 更改不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30357641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:42:10  来源:igfitidea点击:

CSS changes on MVC App not working

cssasp.net-mvcvisual-studiotwitter-bootstrapbundling-and-minification

提问by dave317

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).

我使用 VS Express for web 创建了一个 MVC 应用程序。它只会使用 VS Express 附带的默认内置 CSS 文件。
示例:如果我修改 bootstrap.css 文件(更改 jumbotron 颜色),并从 VS 本地运行,则更改很明显,但是当我进行 Web 部署时,这些更改均不明显。我还注意到,当我将 web.config 文件修改为 Debug=false 时,我所做的 CSS 更改在我从 VS(以及 Web 部署)本地运行时并不明显。

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.

CSS 仍在应用中,但是我所做的任何更改都不会应用。该站点显示旧的默认超大屏幕颜色。如果我在 web.config 中更改 debug=true,那么 jumbotron 会显示我更新后的颜色。当我 web 部署我的网站时,没有应用任何 CSS 更改,它仍然使用默认的 CSS 文件,我什至检查了服务器上的 bootstrap.css,它显示了更新的 jumbotron 颜色,但 jumbotron 仍然是 web 上的默认颜色?? 超级混乱。

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

我做了很多阅读,尝试将以下内容添加到我的 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.

但这并不能解决问题。我尝试从我的文件名中删除 .css,当我使用 debug=false 从 VS 本地运行它时,这解决了问题,但是当我发布网站时,该网站根本不显示 CSS 样式。这不是缓存问题。这与捆绑和 debug=false 有关,但我不知道是什么。我对 web/MVC 开发还是很陌生。我已经用 NuGet 更新了我的 web.optimization 和 microsoft.aspnet 等。

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.

我对此感到非常困难,如果有人有建议并且有效,我会很高兴!Stack Overflow 上有很多关于这个的帖子,但没有一个建议对我有用。

This is my bundle.config.cs:

这是我的 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"));
        }
    }
}

回答by Peter

This is likely due to the bundling framework using bootstrap.cssin local/debug mode and bootstrap.min.csswhen 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.

这可能是由于bootstrap.css在本地/调试模式下和bootstrap.min.css部署时使用的捆绑框架。该框架在确定将哪些文件添加到捆绑包时使用一组约定,其中之一是使用文件的 .min 版本(如果存在)进行发布构建。这可能是咬你的东西。您在 bootstrap.css 中进行了更改,但未在 bootstrap.min.css 中进行更改。

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

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

回答by Kiky Rodriguez

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.

这个问题让我发疯,直到我读到某人关于缓存浏览器数据的评论!在 FireFox 中,我使用 ctrl-r 重新加载页面,一切都按预期进行。长话短说,在检查已发布的样式更改之前,请务必清除缓存。

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.

就我的 azure 网站而言,我进入门户并停止并重新启动服务,这似乎迫使用户刷新样式。

回答by lakshana haritha

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

我认为问题是引导程序版本。Bootswatch 正在使用引导程序 4,但 asp.net 中的默认引导程序文件使用引导程序版本 3,因此类名不正确匹配,因此样式不适用。我下载了对我有用的引导程序版本 3 主题

回答by user12897148

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.

我没有执行上述任何操作,并且在发布 Asp.net 项目时也遇到了同样的问题,对我有用的方法很简单,只需右键单击 css.file,然后单击包含在项目中并发布对我有用的内容。