为什么我的CSS捆绑无法使用bin部署的MVC4应用程序？

Question

我根据这里给出的建议和一两个即时修复,将bin部署了一个MVC4应用程序给我的托管服务提供商,但最明显的问题是css的捆绑不起作用.当我用显式文件refs替换bundle ref时,我的css再次工作.

我正在使用VS2012的标准MVC4 RTM项目模板.提供程序运行IIS 7.5和ASP.NET 4,我以前的同一个应用程序的MVC3版本工作正常.我猜我已经抓住了一个版本太低的依赖,这也可能导致我的基于区域的动作链接问题.

技术症状是:

该行@Styles.Render("~/Content/css")呈现为<link href="/Content/css?v=" rel="stylesheet"/>

Answer 1

更新2013年11月4日:

发生这种情况的原因是因为您在包名称末尾有.js或.css会导致ASP.NET无法通过MVC和BundleModule运行请求.

修复此问题以获得更好性能的推荐方法是从包名称中删除.js或.css.

所以/bundle/myscripts.js成为/ bundle/myscripts

或者,您可以修改system.webServer部分中的web.config以通过BundleModule运行这些请求(这是我原来的答案)

<modules runAllManagedModulesForAllRequests="true">
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

编辑:我也注意到,如果名称以'css'结尾(没有点),那也是一个问题.我不得不将我的包名称从'DataTablesCSS'更改为'DataTablesStyles'来解决我的问题.

Answer 2

无论.NET是运行4.0还是4.5,CSS和脚本捆绑都应该有效.我正在运行.NET 4.0,它对我来说很好.但是,为了使缩小和捆绑行为起作用,必须将web.config设置为不在调试模式下运行.

<compilation debug="false" targetFramework="4.0">

将此包用于_Layout.cshtml文件中的jQuery UI示例.

@Styles.Render("~/Content/themes/base/css")

如果我运行,debug="true"我得到以下HTML.

<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>

但如果我一起跑debug="false".我会得到这个.

<link href="/Content/themes/base/css?v=myqT7npwmF2ABsuSaHqt8SCvK8UFWpRv7T4M8r3kiK01" rel="stylesheet"/>

这是一项功能,因此您可以轻松调试脚本和CSS文件的问题.我正在使用MVC4 RTM.

如果您认为它可能是MVC依赖性问题,我建议您进入Nuget并删除所有与MVC相关的软件包,然后搜索该Microsoft.AspNet.Mvc软件包并进行安装.我正在使用最新版本,它将在v.4.0.20710.0上发布.这应该抓住你需要的所有依赖项.

此外,如果您曾经使用过MVC3并且现在正在尝试使用MVC4,那么您将需要进入web.config并更新其引用以指向MVC的4.0版本.如果您不确定,可以随时创建一个全新的MVC4应用程序并从那里复制web.config.如果这样做,请不要忘记Views/Areas文件夹中的web.config.

更新:我发现您需要的是Microsoft.AspNet.Web.Optimization项目中安装的Nuget包.默认情况下,它包含在MVC4 RTM应用程序中,无论您将目标框架指定为4.5还是4.0.这是捆绑类所包含的命名空间,并且似乎不依赖于框架.我已经部署到没有安装4.5的服务器,它仍然按预期工作.只需确保DLL与应用程序的其余部分一起部署.

Answer 3

只是为了澄清一些事情,System.Web.Optimization(即捆绑/缩小)将对4.0起作用.它不依赖于4.5中的任何东西,所以那里应该没有问题.

如果脚本捆绑工作正常,并且它只是CSS的一个问题,那么问题可能是相对URL？

我首先看看渲染页面,看看你是否得到了CSS包的引用,例如:

<link href="/app/Content/css?v=oI5uNwN5NWmYrn8EXEybCI" rel="stylesheet"/>

如果你是,那么捆绑工作正在运行,但你的CSS包中的东西搞砸了.通常这是由于CSS包中的相对URL不正确,即如果您的图像位于〜/ Content下,但是您为包命名~/bundles/css,浏览器将错误地查找下面的图像~/bundles.

此外,默认行为是禁用捆绑和缩小时debug=true.因此,如果您确实希望启用优化debug=true,则需要强制:

BundleTable.EnableOptimizations = true

更新:使用新信息v="",即捆绑包为空,您应该验证是否正确地将文件添加到捆绑包中,并且它已找到它们.你如何将文件包含在捆绑包中？

Answer 4

省略runAllManagedModulesForAllRequests="true"也对我有用.在以下位置添加以下配置web.config:

<modules>
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

runAllManagedModulesForAllRequests如果使用不当,将对您的网站造成性能损失.看看这篇文章.