css - asp.net mvc 4 包和显式文件包含

Question

我很困惑，我刚开始为我的 ASP.NET MVC4 网站处理 CSS，但我并不完全理解发生了什么。

目前我的移动布局可以正常工作，但对其进行任何更改都会导致一个接一个的奇怪效果。 (例如，未显示到 ajax-loader.gif 的表单不断显示。)

我在 .Layout.Mobile.cshtml 中有以下内容

   @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")  
    <link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.min.css" /> 
    <link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" /> 
    <link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" /> 


    @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

我修改了App_start中的BundleMobileConfig.cs如下:

 //       bundles.Add(new StyleBundle("~/Content/Mobile/css")
 //           .Include("~/Content/Site.Mobile.css"));
 //kludge is the above wrong...and the following needed??
         bundles.Add(new StyleBundle("~/Content/Mobile/css")
            .Include("~/Content/Site.Mobile.css",
                     "~/Content/Mobile/css/"));

我不明白为什么这不是该 bundle 的默认设置？

这是我的问题:

1. 如果您注意到样式表，我应该不需要包含三个显式链接，它们应该来自 bundle 。但是，如果删除其中任何一个，网站就会中断。

   • 为什么修改后的 ~/Content/Mobile/css 包不能提取这些 css 文件？

2. 对于脚本文件，我查看了 code.jquery.com，但我不明白为什么我需要这些。我的本地代码是最新的(即 jquery-1.9.1.js 和 jquery.mobile-1.2.0.js

   • 我希望版本 1.9.1 能够取代 1.7.1 而无需 问题，但事实并非如此

   • jquery.mobile.min.js 应该只在发布和调试之间切换 版本，这不应该导致问题，但确实如此。

我已经使用 Firebug 来查看正在加载的文件，当我使用时我看到了没有显式包含的包的渲染我没有包含文件，为什么不呢？我已阅读有关 bundle 的信息，看来我应该只获取 bundle 文件。

任何人都可以阐明正在发生的事情并指出我可以学习的教程吗如何使用 如何调试 CSS 和包。我读过几本，我发现 Firebug 非常很有用，但我不知道下一步该看哪里。

Answer 1

尝试用这个替换你的包代码。

bundles.Add(new StyleBundle("~/Content/Mobile/css")
        .Include("~/Content/Site.Mobile.css",
                 "~/Content/Mobile/jquery.mobile*"));

这应该加载您的文件而无需明确这样做。