MVC CSS无法在Visual Studio中呈现调试时

Question

我有一个问题,当我编译MVC项目并在[https:// localhost/MyApp上查看]时,CSS无法正确呈现.按钮和背景图像没有显示.它工作了一次,然后由于某种原因它停止工作.页面没有缓存的东西？我用firebug检查页面是否丢失,没有发现错误.Visual Studio 2010中的某些设置需要更改还是IIS？

但是,当我将它发布到一个单独的网站,而不是在(默认网站)区域,使用我在IIS 7.5中设置的[https:// localhost:444]网站时,css似乎渲染得很好.

问题是什么？

Answer 1

MVC 4 网站上发生的一个常见问题是当您拥有 css 包时发布和调试之间的差异。这不一定是你的情况，但你有症状。

我将通过一个例子来解释。

如果你有看起来像这样的包：

var styles = new StyleBundle("~/Content/css").Include(
            "~/Content/toastr.css",
            "~/Content/flags/stylesheets/flags16.css",
            "~/Content/flags/stylesheets/flags32.css",
            "~/Content/Site.css")

在 flags16.css 中你有：

background:url('flags/images/flags16.png');

其中使用文件 ~Content/flags/images/flags16.png

这将在发布模式下工作（web.config 中的编译 debug="false"），因为 bundle 中的所有 css 文件都将作为 1 个文件~/Content/css使用，相对路径'flags/images/flags16.png'指向正确的文件。但是，在调试模式下，ASP.NET MVC 将禁用缩小，如果您@Styles.Render("~/Content/css")在视图中使用，它将呈现指向包中包含的每个文件的链接，因此将有：

<link href="/WorkOrders.Web/Content/flags/stylesheets/flags16.css" rel="stylesheet">

从那个路径来看，图像的相对路径是不行的，所以 flags16.png 中的图像不会被渲染。

解决此问题的一种方法是，您需要将包含图像引用的 .css 文件移动到 bundle 指向的位置（在本例中为 ~/Content ），因此当它被缩小和原始时，它将具有相同的路径。

更新由于您的应用程序不是 mvc4，并且当您的应用程序不在网站的根目录中时（即当它在 localhost/myapp 中时），您会遇到问题，那么您需要检查图片引用中的路径。您可能绝对引用了它们 ( '/somepath/mypic.png')，并且当您的应用程序在 中时localhost/MyApp，路径需要是localhost/MyApp/somepath/mypic.png. @Url.Content(~/somepath/mypic.png)如果您从 cshtml 使用它，则可以通过将 path 替换为 来解决该问题。如果路径在 css 中，那么您需要为图片添加相对路径。

Answer 2

我一直在与同样的问题作斗争 - 图像,脚本和CSS没有找到或呈现.(Visual Studio 2013,Windows 8.1.项目从Visual Studio 2010开始.)

问题是由Web.config中的一行引起的:

<mimeMap fileExtension=".mp4" mimeType="video/mp4" />

似乎因为IIS Express application.host文件已包含此mimeMap定义,IIS Express无法再次处理它.

从Web.config中删除此行完全解决了这个问题.