为什么我的CSS捆绑不能使用bin部署MVC 4应用程序？

时间：2012-08-16 10:40:19

标签： asp.net-mvc asp.net-mvc-4 asp.net-optimization

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

我正在使用VS2012的标准MVC4 RTM项目模板。提供程序运行IIS 7.5和ASP.NET 4，我以前的同一个应用程序的MVC3版本工作正常。我猜我在一个版本太低的地方抓了一个依赖，这也可能对我的area based action link problem有所贡献。

技术症状是：

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

20 个答案:

答案 0 :(得分：78)

更新11/4/2013：

发生这种情况的原因是因为您在捆绑包名称末尾有 .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'来解决我的问题。

答案 1 :(得分：74)

无论.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。

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

答案 2 :(得分：12)

为了澄清一些事情，System.Web.Optimization（又名捆绑/缩小）将对4.0起作用。它不依赖于4.5中的任何内容，所以那里应该没有问题。

如果脚本捆绑正在运行，并且它只是CSS的一个问题，那么问题可能是相对URL？

我首先查看呈现的页面，看看你是否获得了CSS包的引用，例如：

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

如果你是，那么捆绑工作正在发挥作用，但是你的CSS包中的东西搞砸了。通常这是因为CSS包中的相对网址不正确，即如果您的图片位于〜/内容下，但是您为自己的软件包命名~/bundles/css，则浏览器会错误地查找~/bundles下的图片。< / p>

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

BundleTable.EnableOptimizations = true

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

答案 3 :(得分：10)

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

<modules>
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>
如果使用不当，

runAllManagedModulesForAllRequests会对您的网站造成性能影响。查看this article。

答案 4 :(得分：3)

要考虑的另一件事是引用不能具有相同的名称。例如，如果您在libraries目录中有jQuery UI，并将其JavaScript文件捆绑如下：

bundles.Add(new ScriptBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.js"));

然后尝试捆绑其CSS文件：

bundles.Add(new StyleBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.css"));
...

它会失败。他们必须有独特的名字。所以做ScriptBundle("~/libraries/js")...和ScriptBundle("~/libraries/css")...等等。

答案 5 :(得分：1)

我知道这是一个老问题，但是人们可能仍然会面对这个问题。

以下内容将检查BundleModule是否存在于web.config中并已加载， 并根据其存在性设置EnableOptimizations。

这样，无论是否可用，css / js引用都可以正常工作。 换句话说：

  • 如果BundleModule可用，则将启用捆绑/优化。

  • 如果BundleModule不可用，则将禁用捆绑/优化，并自动使用完整引用 代替。

代码：

public static void RegisterBundles(BundleCollection bundles)
{
   // bundeling code here
   // ...
   // bundeling code here

   bool bundelingModuleIsAvailable = false;
   try { 
       bundelingModuleIsAvailable = HttpContext.Current.ApplicationInstance.Modules.AllKeys.Contains("BundleModule"); 
   }
   catch { }
   if (!bundelingModuleIsAvailable)
       System.Diagnostics.Debug.WriteLine("WARNING : optimization bundle is not added to Web.config!");

   BundleTable.EnableOptimizations = bundelingModuleIsAvailable && !Debug_CheckIsRunning();
   //Debug_CheckIsRunning is optional, incase you want to disable optimization when debugging yourself
   BundleTable.EnableOptimizations = true;
}

private bool Debug_CheckIsRunning()
{//Check if debug is running
    string moduleName = System.Diagnostics.Process.GetCurrentProcess().MainModule.ModuleName;
    return (moduleName.Contains("iisexpress.exe") || moduleName.Contains(".vshost") || moduleName.Contains("vstest.executionengine") || moduleName.Contains("WebDev.WebServer"));
    }

答案 6 :(得分：1)

我的一个css文件在文件名中有一个'_'字符，导致出现问题。

将your_style.css重命名为yourstyle.css

答案 7 :(得分：1)

我在实时环境中遇到了与CSS相同的问题。我按照这里的所有建议进行了调查，并调查了捆绑工作如何在幕后工作。这导致我要求清除.Net缓存（我无法访问应用服务器），这导致捆绑开始在应用服务器上工作。但是，当通过配置了CDN的负载均衡器访问站点时，尽管在URL中更新了bundle标识符，但该bundle包含旧的CSS。简单地刷新CDN解决了这个问题。

我希望这可以帮助其他可能遇到此问题的人

答案 8 :(得分：1)

作为现有答案的附录，其中没有一个对我有用，我在这里找到了解决方案：

https://bundletransformer.codeplex.com/discussions/429707

解决方案是

  1. 右键单击visual studio中的.less文件
  2. 选择属性
  3. 将Build Action标记为Content
  4. 重新部署

    5. 我不需要删除无扩展名处理程序（可以在互联网上的其他解决方案中找到）

    我没有添加<add name="BundleModule" type="System.Web.Optimization.BundleModule" /> web.config设置。

    希望这有帮助！

答案 9 :(得分：0)

css名称必须一致。

jqueryUI css的名称不是Contents / themes / base文件夹中的“jquery.ui.XXX”。

所以它应该是：

错误：

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                                    "~/Content/themes/base/jquery.ui.core.css",
                                    "~/Content/themes/base/jquery.ui.resizable.css",
                                    "~/Content/themes/base/jquery.ui.selectable.css",
                                    "~/Content/themes/base/jquery.ui.accordion.css",
                                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                                    "~/Content/themes/base/jquery.ui.button.css",
                                    "~/Content/themes/base/jquery.ui.dialog.css",
                                    "~/Content/themes/base/jquery.ui.slider.css",
                                    "~/Content/themes/base/jquery.ui.tabs.css",
                                    "~/Content/themes/base/jquery.ui.datepicker.css",
                                    "~/Content/themes/base/jquery.ui.progressbar.css",
                                    "~/Content/themes/base/jquery.ui.theme.css"));

正确：

            bundles.Add(new StyleBundle("~/Bundles/themes/base/css").Include(
                                    "~/Content/themes/base/core.css",
                                    "~/Content/themes/base/resizable.css",
                                    "~/Content/themes/base/selectable.css",
                                    "~/Content/themes/base/accordion.css",
                                    "~/Content/themes/base/autocomplete.css",
                                    "~/Content/themes/base/button.css",
                                    "~/Content/themes/base/dialog.css",
                                    "~/Content/themes/base/slider.css",
                                    "~/Content/themes/base/tabs.css",
                                    "~/Content/themes/base/datepicker.css",
                                    "~/Content/themes/base/progressbar.css",
                                    "~/Content/themes/base/theme.css"));

我在MVC5中尝试过并且成功了。

答案 10 :(得分：0)

我在Azure网站中部署代码时遇到了这个问题。当我从visualstudio.com部署构建并且当我尝试从visual studio 2013发布构建时，它确实有效。主要问题是CSS Minification。我完全同意对这个问题的第一反应。但想到分享对我有用的解决方案，可能会帮助你修复它。

基本上当我们通过VSO进行部署时，它会通过在system.web.Optimization中踢出来为css，js生成缩小文件，但是当我们从VS 2013发布版本时，我们必须处理以下内容。 bundling-and-minification 1.确保文件夹结构和bundler命名约定应该不同。像这样的东西。

bundles.Add(new StyleBundle("~/Content/materialize/mcss").Include(
                  "~/Content//materialize/css/materialize.css"));

2。添加到bundleconfig定义的底部

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
             "~/Scripts/jquery-{version}.js"));

   // Code removed for clarity.
   BundleTable.EnableOptimizations = true;
}

3。确保在web.config中添加debug false（当你启动本地debuging VS2013时会给你一个弹出窗口，告诉你需要确保在部署到prod之前把它放回去。这本身解释得很多。

<system.web>
  <compilation debug="true" />
  <!-- Lines removed for clarity. -->
</system.web>

答案 11 :(得分：0)

我遇到了同样的问题而且结果是一个愚蠢的错误，css文件没有包含在项目中，所以它们没有发布，请确保查看解决方案中的所有文件并将它们添加到项目中。

答案 12 :(得分：0)

使用Visual Studio 2015，我发现问题是由于在web.config中设置了debug = true时在BundleConfig中引用.min版本的javascript文件引起的。

例如，使用jquery在BundleConfig中指定以下内容：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.min.js"));

导致在web.config中设置debug = true时，jquery根本没有正确加载。

引用未缩小的版本：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

解决问题。

设置debug = false也可以解决问题，但当然这并不是很有用。

值得注意的是，虽然一些缩小的javascript文件正确加载而其他人没有。我最终删除了所有缩小的javascript文件，转而支持VS处理缩小。

答案 13 :(得分：0)

试试这个：

    @System.Web.Optimization.Styles.Render("~/Content/css")
    @System.Web.Optimization.Scripts.Render("~/bundles/modernizr")

对我有用。 我还在学习，但我还没弄明白为什么会发生这种情况

答案 14 :(得分：0)

为了向对话添加有用的信息，我在部署中遇到了404错误（在本地开发环境中这很好）。

对于包名称，我包括如下的版本号：

bundles.Add(new ScriptBundle("~/bundles/jquerymobile.1.4.3").Include(
...
);

一时兴起，我删除了所有的点，所有这些都再次神奇地工作：

bundles.Add(new ScriptBundle("~/bundles/jquerymobile143").Include(
...
);

希望能帮助别人节省一些时间和挫折感。

答案 15 :(得分：0)

您需要在共享视图中添加此代码

 @*@Scripts.Render("~/bundles/plugins")*@
    <script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <!-- Kendo JS -->
    <script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
    <script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
    <script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
    <!-- Morris.js charts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="/Content/plugins/morris/morris.min.js"></script>
    <!-- Sparkline -->
    <script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!-- jvectormap -->
    <script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <!-- jQuery Knob Chart -->
    <script src="/Content/plugins/knob/jquery.knob.js"></script>
    <!-- daterangepicker -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
    <!-- datepicker -->
    <script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    <!-- Slimscroll -->
    <script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="/Content/plugins/fastclick/fastclick.min.js"></script>
    <!-- AdminLTE App -->
    <script src="/Content/dist/js/app.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="/Content/dist/js/demo.js"></script>
    <!-- Common -->
    <script src="/Scripts/common/common.js"></script>
    <!-- Render Sections -->
    @RenderSection("scripts", required: false)
    @RenderSection("HeaderSection", required: false)

答案 16 :(得分：0)

我在从nuget添加一些软件包并忘记进行更新时遇到了这个问题

首先更新项目中安装的所有软件包

Update-Package

在Global.asax.cs中添加以下内容

BundleTable.EnableOptimizations = true;

答案 17 :(得分：0)

仅限历史：

检查捆绑包中所有提到的less / css文件是否具有Build Action =＆＃34; Content＆＃34;。

如果目标服务器上的某些文件丢失，则没有错误。

答案 18 :(得分：-2)

这解决了我的问题。我在_layout.cshtml中添加了这些行

@*@Scripts.Render("~/bundles/plugins")*@
<script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Kendo JS -->
<script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/Content/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/Content/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/Content/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/Content/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Content/dist/js/demo.js"></script>
<!-- Common -->
<script src="/Scripts/common/common.js"></script>
<!-- Render Sections -->

答案 19 :(得分：-5)

我有同样的问题。我只是转换

@Styles.Render("~/Content/css")
and @Scripts.Render("~/bundles/modernizr") to 
    @Styles.Render("/Content/css")
    @Scripts.Render("/bundles/modernizr")

和它的工作。 只是不要忘记转换

   @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
to 
    @Scripts.Render("/bundles/jquery")
    @Scripts.Render("/bundles/bootstrap")

度过愉快的时光

相关问题
最新问题