为什么我的CSS捆绑不能使用bin部署的MVC4应用程序？
我有斌根据这里给出的build议和一个或两个即时修复部署了一个MVC4应用程序到我的托pipe服务提供商，但最明显的问题是，捆绑的CSS不起作用。 当我用明确的文件引用replace捆绑裁决，我的CSS再次工作。
我正在使用VS2012的标准MVC4 RTM项目模板。 提供者正在运行IIS 7.5和ASP.NET 4，和我以前的MVC3版本的相同的应用程序工作正常。 我猜测我已经抓住了一个版本太低的依赖项，这也可能导致我的区域的行动链接问题 。
技术症状是：
行@Styles.Render("~/Content/css")呈现为<link href="/Content/css?v=" rel="stylesheet"/>
无论.NET运行4.0还是4.5，CSS和脚本绑定都应该可以工作。 我正在运行.NET 4.0，它对我来说工作正常。 但是，为了使缩小和捆绑行为正常工作，必须将web.config设置为不在debugging模式下运行。
<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"/>
这是一个function，所以你可以很容易地debugging你的脚本和CSS文件的问题。 我正在使用MVC4 RTM。
如果你认为这可能是一个MVC的依赖问题，我build议进入Nuget，并删除所有的MVC相关的包，然后searchMicrosoft.AspNet.Mvc包并安装它。 我使用的是最新的版本，它的版本是v.4.0.20710.0。 这应该抓住你需要的所有依赖。
此外，如果你曾经使用MVC3，现在正在尝试使用MVC4，你会想进入你的web.config（s）和更新他们的参考指向4.0版本的MVC。 如果你不确定，你总是可以创build一个新的MVC4应用程序，并从那里复制web.config。 如果你这样做，不要忘了你的Views / Areas文件夹中的web.config文件。
更新：我发现你需要的是在你的项目中安装的Nuget包Microsoft.AspNet.Web.Optimization 。 无论您将目标框架指定为4.5还是4.0，它都默认包含在MVC4 RTM应用程序中。 这是绑定类包含在其中的名称空间，似乎并不依赖于框架。 我已经部署到没有4.5安装的服务器，它仍然按我的预期工作。 只要确保DLL与您的应用程序的其余部分一起部署。
更新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”来解决我的问题。
只是为了澄清一些事情， System.Web.Optimization （aka Bundling / Minification）将对4.0工作。 它不依赖于4.5中的任何内容，所以在那里应该没有问题。
如果脚本绑定正在工作，并且它只是CSS的一个问题，也许问题是与相对URL？
我首先看看呈现的页面，看看你是否得到CSS包的引用，例如：
<link href="/app/Content/css?v=oI5uNwN5NWmYrn8EXEybCI" rel="stylesheet"/>
如果你是，捆绑工作，但在你的CSS包内的东西搞砸了。 通常这是由于你的CSS包中的相对URL是不正确的，也就是说，如果你的图像在〜/ Content下，但是你命名了bundle〜 ~/bundles/css ，浏览器将不正确地在~/bundles下查找图像。
此外，默认行为是当debug=true时禁用捆绑和缩小。 所以，即使在debug=true时候，如果你想要启用优化，你将需要强制：
BundleTable.EnableOptimizations = true
更新：用新的信息v="" ，这意味着该包是空的，你应该validation你正在添加文件到包正确，并find它们。 你如何包含文件到包？
省略runAllManagedModulesForAllRequests="true"也适用于我。 在web.config添加以下configuration：
<modules> <remove name="BundleModule" /> <add name="BundleModule" type="System.Web.Optimization.BundleModule" /> </modules>
如果使用不当， runAllManagedModulesForAllRequests会在您的网站上产生性能问题。 看看这篇文章 。
另外要考虑的是参考文件不能有相同的名称。 例如，如果您在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")...或者其他的东西。
作为现有答案的附录，其中没有一个为我工作，我发现我的解决scheme在这里：
https://bundletransformer.codeplex.com/discussions/429707
解决的办法是
- 右键单击Visual Studio中的.less文件
- select属性
- 将
Build Action标记为Content - 重新部署
我不需要删除扩展名处理程序（可以在互联网上的其他解决scheme中find）
我没有添加<add name="BundleModule" type="System.Web.Optimization.BundleModule" /> web.config设置。
希望这可以帮助！
我在现场环境中遇到了与CSS相同的问题。 我在这里跟随了所有的build议，并调查了幕后的捆绑工作。 这导致我请求清除.Netcaching（我没有访问应用程序服务器），导致绑定开始在应用程序服务器上工作。 但是，当通过configuration了CDN的负载均衡器访问站点时，虽然在URL中更新了包标识符，但包中包含旧的CSS。 简单地冲洗CDN解决了这个问题。
我希望这可以帮助一些可能遇到这个问题的人
只是为了历史：
检查包中所有提及的less / css文件是否有Build Action =“Content”。
如果目标服务器上缺less一些文件，则不会出现错误。
我有同样的问题，结果是一个愚蠢的错误，CSS文件没有包括在项目中，所以他们没有发布，请确保您查看解决scheme中的所有文件，并将其添加到项目。
在Azure网站中部署代码时，我遇到了这个问题。 它在我从visualstudio.com部署构build时确实工作，而不是当我试图从Visual Studio 2013发布构build。主要问题是CSS Minification。 我完全同意第一个回答这个问题。 但想到共享解决scheme，为我工作，可能会帮助你解决它。
基本上当我们通过VSO进行部署时，它会通过在system.web.Optimization中踢脚本来为css，js生成缩小文件，但是当我们从VS 2013发布构build时，我们必须关注下面的内容。 捆绑和缩小 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中添加debugging错误（当你开始本地debugging时，VS2013会给你一个popup窗口，说你需要在部署到产品之前把它放回去，这本身就说明了很多。
<system.web> <compilation debug="true" /> <!-- Lines removed for clarity. --> </system.web>
在Visual Studio 2015中，我发现问题是由于在web.config中设置debug = true时，引用了BundleConfig中的JavaScript文件的.min版本引起的。
例如，用jquery在BundleConfig中指定以下内容：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.min.js"));
导致jquery在web.config中设置了debug = true时没有正确加载。
引用未缩小的版本：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
纠正问题。
设置debug = false也可以解决这个问题，但是这当然不是很有帮助。
还值得一提的是，虽然一些缩小的JavaScript文件正确加载和其他人没有。 我最终删除了所有缩小的JavaScript文件，以支持VS处理缩小。
尝试这个：
@System.Web.Optimization.Styles.Render("~/Content/css") @System.Web.Optimization.Scripts.Render("~/bundles/modernizr")
它对我有用。 我还在学习，而且我还没有弄明白为什么会这样
为了给对话添加有用的信息，我在部署中遇到了404错误（在本地开发环境中很好）。
对于软件包名称，我包括这样的版本号：
bundles.Add(new ScriptBundle("~/bundles/jquerymobile.1.4.3").Include( ... );
一时兴起，我删除了所有的点，所有的神奇再次工作：
bundles.Add(new ScriptBundle("~/bundles/jquerymobile143").Include( ... );
希望能帮助别人节省一些时间和挫折感。
您需要在共享视图中添加此代码
@ @ Scripts.Render（“〜/ bundles / plugins”） @ enter code here enter code here @RenderSection（“scripts”，required：false）@RenderSection（“HeaderSection”，required：false）
我在从nuget添加一些软件包的时候遇到了这个问题，忘记了更新
所以首先要更新项目中安装的所有软件包
Update-Package
在Global.asax.cs中添加以下内容
BundleTable.EnableOptimizations = true;
我的一个css文件在文件名中有一个“_”字符，这引起了问题。
将your_style.css更名为yourstyle.css
CSS名称必须一致。
jqueryUI css的名称在内容/主题/基础文件夹中不是“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，并成功地工作。
这解决了我的问题。 我在_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 -->
我有同样的问题 。 我只是转换
@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")
好时光
