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

Why is my CSS bundling not working with a bin deployed MVC4 app?

提问by ProfK

I have bin deployed an MVC4 application to my hosting provider, based on advice given here and one or two on-the-fly fixes, but the most immediately apparent problem is that the bundling for css doesn't work. When I replace the bundle ref with explicit file refs, my css works again.

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

I am using a standard MVC4 RTM project template from VS2012. The provider is running IIS 7.5 and ASP.NET 4, and my previous MVC3 version of the same app worked fine. I am guessing I have grabbed a dependency somewhere of too low a version, and this might also contribute to my area based action link problem.

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

Technical symptoms are:

技术症状是：

The line @Styles.Render("~/Content/css")renders as <link href="/Content/css?v=" rel="stylesheet"/>

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

回答by cdeutsch

UPDATE 11/4/2013:

2013 年 11 月 4 日更新：

The reason why this happens is because you have .jsor .cssat the end of your bundle name which causes ASP.NET to not run the request through MVC and the BundleModule.

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

The recommended way to fix this for better performance is to remove the .jsor .cssfrom your bundle name.

为了提高性能，推荐的修复方法是从包名称中删除.js或.css。

So /bundle/myscripts.jsbecomes /bundle/myscripts

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

Alternatively you can modify your web.config in the system.webServersection to run these requests through the BundleModule (which was my original answer)

或者，您可以修改system.webServer部分中的web.config 以通过 BundleModule 运行这些请求（这是我的原始答案）

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

Edit: I also noticed that if the name ends with 'css' (without the dot), that is a problem as well. I had to change my bundle name from 'DataTablesCSS' to 'DataTablesStyles' to fix my issue.

编辑：我还注意到，如果名称以 'css' 结尾（不带点），那也是一个问题。我不得不将我的包名称从“DataTablesCSS”更改为“DataTablesStyles”来解决我的问题。

回答by Nick Albrecht

The CSS and Script bundling should work regardless if .NET is running 4.0 or 4.5. I am running .NET 4.0 and it works fine for me. However in order to get the minification and bundling behavior to work your web.config must be set to not be running in debug mode.

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

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

Take this bundle for jQuery UI example in the _Layout.cshtml file.

以 _Layout.cshtml 文件中的 jQuery UI 示例包为例。

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

If I run with debug="true"I get the following HTML.

如果我运行，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"/>

But if I run with debug="false". I'll get this instead.

但是如果我用debug="false". 我会得到这个。

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

This is a feature so you can easily debug problems with your Script and CSS files. I'm using the MVC4 RTM.

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

If you think it might be an MVC dependency problem, I'd recommend going into Nuget and removing all of your MVC related packages, and then search for the Microsoft.AspNet.Mvcpackage and install it. I'm using the most recent version and it's coming up as v.4.0.20710.0. That should grab all the dependencies you need.

如果您认为这可能是 MVC 依赖问题，我建议您进入 Nuget 并删除所有与 MVC 相关的包，然后搜索该Microsoft.AspNet.Mvc包并安装它。我使用的是最新版本，它的版本是 v.4.0.20710.0。这应该会获取您需要的所有依赖项。

Also if you used to be using MVC3 and are now trying to use MVC4 you'll want to go into your web.config(s) and update their references to point to the 4.0 version of MVC. If you're not sure, you can always create a fresh MVC4 app and copy the web.config from there. Don't forget the web.config in your Views/Areas folders if you do.

此外，如果您曾经使用 MVC3 而现在尝试使用 MVC4，您将需要进入您的 web.config(s) 并更新它们的引用以指向 MVC 的 4.0 版本。如果您不确定，您始终可以创建一个新的 MVC4 应用程序并从那里复制 web.config。如果您这样做，请不要忘记您的 Views/Areas 文件夹中的 web.config。

UPDATE:I've found that what you need to have is the Nuget package Microsoft.AspNet.Web.Optimizationinstalled in your project. It's included by default in an MVC4 RTM app regardless if you specify the target framework as 4.5 or 4.0. This is the namespace that the bundling classes are included in, and doesn't appear to be dependent on the framework. I've deployed to a server that does not have 4.5 installed and it still works as expected for me. Just make sure the DLL gets deployed with the rest of your app.

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

回答by Hao Kung

Just to clarify a few things, System.Web.Optimization(aka Bundling/Minification) will work against 4.0. It is not depending on anything in 4.5, so there should be no problems there.

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

If script bundling is working, and its only an issue with CSS, perhaps the issue is with relative URLs?

如果脚本捆绑工作正常，并且它只是 CSS 的问题，那么问题可能出在相对 URL 上？

I'd first look at the rendered page and see if you are getting references to the CSS bundle, i.e. something like:

我会首先查看呈现的页面，看看您是否正在获取对 CSS 包的引用，例如：

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

If you are, then bundling is working, but something inside your CSS bundle is messed up. Usually this is due to relative URLs inside your CSS bundle being incorrect, i.e. if your images live under ~/Content, but you name your bundle ~/bundles/css, the browser will incorrectly look for images under ~/bundles.

如果是，那么捆绑就可以了，但是 CSS 捆绑中的某些东西搞砸了。通常这是由于您的 CSS 包中的相对 URL 不正确，即，如果您的图像位于 ~/Content 下，但您将包命名为~/bundles/css，则浏览器将错误地查找 下的图像~/bundles。

Also, the default behavior is to disable bundling and minification when debug=true. So, if you do want optimizations enabled even when debug=true, you will need to force:

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

BundleTable.EnableOptimizations = true

Updated:With the new info that v="", that means the bundle was empty, you should verify that you are adding files to the bundle correctly, and that it found them. How are you including files to the bundle?

更新：有了新的信息v=""，这意味着包是空的，你应该验证你是否正确地将文件添加到包中，并且它找到了它们。您如何将文件包含到捆绑包中？

回答by Kurt

Omitting runAllManagedModulesForAllRequests="true"also worked for me. Add the following configuration in web.config:

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

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

runAllManagedModulesForAllRequestswill impose a performance hit on your website if not used appropriately. Check out this article.

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

回答by Jonathan Landrum

Another thing to consider is the references cannot have the same name. For example, if you have jQuery UI in the librariesdirectory, and bundle its JavaScript file like so:

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

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

and then try to bundle its CSS files like so:

然后尝试像这样捆绑它的 CSS 文件：

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

it will fail. They have to have unique names. So do something like ScriptBundle("~/libraries/js")...and ScriptBundle("~/libraries/css")...or whatever.

它会失败。他们必须有唯一的名字。所以，这样做ScriptBundle("~/libraries/js")...和ScriptBundle("~/libraries/css")...或什么的。

回答by Alex C

As an addendum to the existing answers, none of which worked for me I found my solution HERE:

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

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

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

The solution was to

解决办法是

1. right click the .less files in visual studio
2. Select properties
3. Mark the Build Actionas Content
4. Redeploy

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

I did NOT need to remove extensionless handlers (as can be found in other solutions on the internet)

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

I did NOT have to add the <add name="BundleModule" type="System.Web.Optimization.BundleModule" />web.config setting.

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

Hope this helps!

希望这可以帮助！

回答by Corporalis

I encountered the same issue with CSS on a live environment. I followed all of the advise here and investigated how the bundling works behind the scene. This lead me to request that the .Net cache was cleared (I didn't have access to the app servers) which caused the bundling to start working on the app servers. However, when accessing the site via a load balancer with a CDN configured, although the bundle identifier was updated in the url, the bundle contained the old CSS. Simply flushing the CDN resolved the issue.

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

I hope this goes some way to helping some one else who may encounter this

我希望这在某种程度上可以帮助可能遇到此问题的其他人

回答by cal5barton

One of my css files had an '_' character in the file name which caused issues.

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

Renamed your_style.css to yourstyle.css

将 your_style.css 重命名为 yourstyle.css

回答by Amro

I know this is an old issue, but people may still face this.

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

The following checks if the BundleModule exists in web.config and loaded, and sets EnableOptimizations based on its existance.

下面检查 web.config 中是否存在 BundleModule 并加载，并根据其存在设置 EnableOptimizations。

This way wether it is available or not, the css/js references will work fine. In other words:

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

• If BundleModule is available, the bundeling/optimization will be enabled.

• If BundleModule is not available, the bundeling/optimization will be disabled and automatically the full references will be used instead.

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

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

Code:

代码：

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"));
    }

回答by James Blake

With Visual Studio 2015 I found the problem was caused by referencing the .min version of a javascript file in the BundleConfig when debug=true is set in the web.config.

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

For example, with jquery specifying the following in BundleConfig:

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

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

resulted in the jquery not loading correctly at all when debug=true was set in the web.config.

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

Referencing the un-minified version:

引用未缩小版本：

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

corrects the problem.

纠正问题。

Setting debug=false also corrects the problem, but of course that is not exactly helpful.

设置 debug=false 也可以纠正问题，但当然这不是很有帮助。

It is also worth noting that while some minified javascript files loaded correctly and others did not. I ended up removing all minified javascript files in favor of VS handling minification for me.

还值得注意的是，虽然一些缩小的 javascript 文件可以正确加载，而另一些则没有。我最终删除了所有缩小的 javascript 文件，以支持 VS 为我处理缩小。