MVC CSS在Visual Studio中没有渲染时调试 [英] MVC CSS not rendering in Visual Studio When debugging

问题描述

我有那里的CSS没有正确渲染，当我编译MVC项目并查看它的一个问题[HTTPS：//本地主机/ MyApp的]的按钮和背景图片没有显示出来。它的工作有一段时间，然后由于某种原因停止工作。一些与页面不缓存？我用萤火虫来检查，看看是否网页被遗漏，并没有发现任何错误。什么东西在Visual Studio 2010中设置需要更改或IIS？

I have an issue where the CSS is not rendering properly when I compile the MVC project and view it on [https://localhost/MyApp.] The buttons, and background image are not showing up. It worked one time, then for some reason it stop working. Something with the pages not caching? I used firebug to check to see if the pages were missing, and no errors were found. Something in Visual Studio 2010 settings need changing or IIS?

然而，当我在（默认网站）区其发布的而不是一个单独的网站，使用[https：//开头本地主机：444]在IIS 7.5网站，我设置的CSS似乎呈现罚款。

However, when I publish it to an individual website, instead of in the (default web site) area, using [https://localhost:444] website I setup in IIS 7.5, the css seem to render fine.

这是什么问题？

推荐答案

这是发生在MVC 4个网站是发布和调试的区别，当你有CSS捆绑的一个普遍问题。它没有成为你的情况，但你有症状。

One common problem that occurs on MVC 4 websites is difference between release and debug when you have css bundles. It does not have to be your case, but you have the symptoms.

我会一个例子来解释。

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

If you have bundle which looks like this:

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您有：

And in flags16.css you have:

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

其中在使用文件〜内容/标记/影像/ flags16.png

这将在释放模式工作（编译调试=在web.config中假），因为所有的捆绑你的CSS文件将被担任位于〜/内容/ CSS 1文件使用相对路径'标志/图片/ flags16.png 指向正确的文件。
然而，在调试模式下，ASP.NET MVC将禁用缩小，如果你使用 @ Styles.Render（〜/内容/ CSS）视图里面，它会呈现链接到包含在捆绑您的文件中的每一个，所以会有一个：

That will work in release mode (compilation debug="false" in web.config), because all of your css files in bundle will be served as 1 file located at ~/Content/css with relative path 'flags/images/flags16.png' pointing at correct file. However, in debug mode, ASP.NET MVC will disable minification, and if you used @Styles.Render("~/Content/css") inside your view, it will render link to every one of your files contained in a bundle, so there will be a:

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

和从该路径，图像相对路径也不行，所以在flags16.png图像不会被渲染。

And from that path, relative path to image is not ok, so images in flags16.png will not be rendered.

解决方法之一，你需要在送达缩小的移动它包含图像的位置，束指向（〜/内容在这种情况下）引用您的.css文件，所以它具有相同的路径和生的。

One way to solve this, you need to move your .css file which contains references to images to the location where bundle is pointing (~/Content in this case), so it will have same path when it is served minified and raw.

更新当你的应用程序是不是mvc4，你有问题，当您的应用程序是不是在你的网站的根目录下（即当它在本地主机/ MyApp的），那么你需要检查路径您的照片引用。这可能是你引用它们绝对（/ somepath / mypic.png ），当你的应用程序是在本地主机/ MyApp的，路径需要本地主机/ MyApp的/ somepath / mypic.png 。您可以通过使用替换路径@ Url.Content解决（〜/ somepath / mypic.png），如果您使用的是从CSHTML。如果路径是在CSS，那么你就需要把相对路径您的照片。

UPDATE As your app is not mvc4, and you have problems when your app is not in the root of your web site (i.e. when it is in localhost/myapp) then you need to check paths in references to your pictures. It is possible that you referenced them absolutely ('/somepath/mypic.png'), and when your app is in localhost/MyApp, path needs to be localhost/MyApp/somepath/mypic.png. You can solve that by replacing path with @Url.Content(~/somepath/mypic.png), if you are using it from cshtml. If path is in css, then you need to put relative path to your pictures.

这篇关于MVC CSS在Visual Studio中没有渲染时调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！