asp.net-mvc - 为什么我的 CSS 捆绑不适用于 bin 部署的 MVC4 应用程序？

Question

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

我正在使用来自 VS2012 的标准 MVC4 RTM 项目模板。该提供程序正在运行 IIS 7.5 和 ASP.NET 4，而我之前的同一应用程序的 MVC3 版本运行良好。我猜我在某个版本太低的地方获取了依赖项，这也可能导致我的基于区域的操作链接问题。

技术症状是：

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

score 83 · Accepted Answer

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”来解决我的问题。

score 79 · Accepted Answer

无论 .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(s) 并更新它们的引用以指向 MVC 的 4.0 版本。如果您不确定，您可以随时创建一个新的 MVC4 应用程序并从那里复制 web.config。如果您这样做，请不要忘记 Views/Areas 文件夹中的 web.config。

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

score 12 · Accepted Answer

只是为了澄清一些事情，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=""，这意味着捆绑包是空的，您应该验证您正在正确地将文件添加到捆绑包中，并且它找到了它们。您如何将文件包含到捆绑包中？

score 10 · Accepted Answer

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

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

runAllManagedModulesForAllRequests如果使用不当，将对您的网站造成性能影响。看看这篇文章。

score 3 · Accepted Answer

要考虑的另一件事是引用不能具有相同的名称。例如，如果您在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")...或其他的事情。

score 1 · Accepted Answer

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

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

解决方案是

右键单击 Visual Studio 中的 .less 文件
选择属性
标记Build Action为Content
重新部署

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

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

希望这可以帮助！

score 1 · Accepted Answer

我的一个 css 文件的文件名中有一个“_”字符，这导致了问题。

将 your_style.css 重命名为 yourstyle.css

score 1 · Accepted Answer

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

下面检查 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"));
    }

score 1 · Accepted Answer

我在实时环境中遇到了与 CSS 相同的问题。我遵循了这里的所有建议，并调查了捆绑在幕后的工作方式。这导致我请求清除 .Net 缓存（我无权访问应用服务器），这导致捆绑开始在应用服务器上运行。但是，当通过配置了 CDN 的负载均衡器访问站点时，尽管在 url 中更新了捆绑包标识符，但捆绑包包含旧的 CSS。只需刷新 CDN 即可解决问题。

我希望这有助于帮助可能遇到这种情况的其他人

score 0 · Accepted Answer

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

score 0 · Accepted Answer

只为历史：

检查捆绑中所有提到的less/css文件是否具有Build Action =“Content”。

如果目标服务器上缺少捆绑包中的某些文件，则不会出现错误。

score 0 · Accepted Answer

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 中尝试过并成功运行。

score 0 · Accepted Answer

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

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

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

一时兴起，我删除了所有的点，一切又神奇地工作了：

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

希望这可以帮助某人节省一些时间和挫败感。

score 0 · Accepted Answer

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

所以首先对项目中安装的所有包进行更新

Update-Package

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

BundleTable.EnableOptimizations = true;

score 0 · Accepted Answer

我在 Azure 网站中部署代码时遇到了这个问题。当我从 visualstudio.com 部署构建时它确实有效，而当我尝试从 Visual Studio 2013 发布构建时却没有。主要问题是 CSS 缩小。我完全同意对这个问题的第一个回答。但是想到共享对我有用的解决方案，可能会帮助您修复它。

基本上，当我们通过 VSO 部署时，它会通过启动 system.web.Optimization 为 css、js 生成缩小文件，但是当我们从 VS 2013 发布构建时，我们必须注意以下事项。捆绑和缩小 1. 确保文件夹结构和您的捆绑器命名约定应该不同。像这样的东西。

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（当你开始本地调试时VS2013会给你一个弹出窗口，说你需要确保在部署到prod之前把它放回去。这本身就解释了很多。

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

score 0 · Accepted Answer

尝试这个：

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

它对我有用。我还在学习，我还没有弄清楚为什么会这样

score 0 · Accepted Answer

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

 @*@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)

score 0 · Accepted Answer

在 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 为我处理缩小。

score -2 · Accepted Answer

这解决了我的问题。我在 _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 -->

score -6 · Accepted Answer

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

@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")

玩得开心

asp.net-mvc - 为什么我的 CSS 捆绑不适用于 bin 部署的 MVC4 应用程序？

20 回答 20

Related

Reference