部署后捆绑的 css 不显示... ASP.NET MVC4答案

【问题标题】：Bundled css not displaying after deploy ... ASP.NET MVC4部署后捆绑的 css 不显示... ASP.NET MVC4
【发布时间】：2013-02-19 23:15:13
【问题描述】：

在部署我的 MVC 应用程序时，.NET 4.5 框架正在捆绑和缩小我的 CSS。但是，生成的文件是空的，因此不应用 CSS 规则。在 Chrome 中，我收到 Resource interpreted as Stylesheet but transferred with MIME type text/plain 警告。在 IE9 中，我收到 CSS was ignored due to mime type mismatch 警告。

这就是我的 BundleConfig 中的内容

bundles.Add(
    new StyleBundle("~/Content/bootstrap").Include(
        "~/Content/bootstrap/bootstrap-responsive.css",
        "~/Content/bootstrap/bootstrap-editable.css",
        "~/Content/bootstrap/FileUpload.css"));

这是我的布局头：

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <link href="@ViewBag.StyleUrl" rel="stylesheet" type="text/css" />
    @Styles.Render("~/Content/bootstrap")
    <script src="~/scripts/libs/modernizr/modernizr-2.5.3.js" type="text/javascript"></script>
</head>

额外的样式表用于基于我们管理工具中的配置动态加载的样式表。

当我在本地运行它时，或者如果我设置 debug="true"，那么我会得到我的个人文件并且一切看起来都应该如此。如果我将这些硬编码到我的布局页面中，它们会显示得很好。我检查了 IIS 并查看了 CSS 的正确 MIME 类型（考虑到硬编码值有效，这很有意义）。我还检查以确保安装了“静态内容”角色服务，因为我在谷歌搜索中也遇到过。

有什么想法吗？

【问题讨论】：

你能在 html 中显示你的 css 包含吗？

标签： asp.net-mvc bundling-and-minification

【解决方案1】：

bundle 名称与文件系统上的文件夹名称相同，

将您的捆绑包更改为

bundles.Add(
new StyleBundle("~/Content/bootstrapBundle").Include(
    "~/Content/bootstrap/bootstrap-responsive.css",
    "~/Content/bootstrap/bootstrap-editable.css",
    "~/Content/bootstrap/FileUpload.css"));

即所以捆绑的名称不是文件夹或文件的名称

【讨论】：

太棒了！拯救了我的一天。
我这样做了，但后来所有的 CSS 样式都搞砸了。使用默认模板，例如，主页下拉菜单停止工作，单击不会下拉任何内容。
我遇到了类似的问题，但在我的情况下，我的包名称中有一个点（包名为 error.handler）。从捆绑的名称中删除点后，它就像一个魅力。我希望新版本的 ASP.NET MVC 支持这一点，或者至少警告我们。
哇，你为我节省了很多时间，我今天很幸运能先找到正确答案

【解决方案2】：

遇到了同样的问题。我的解决方案是无效的捆绑名称（它由“_”或“。”组成）。名称需要是纯文本：

bundles.Add(
new StyleBundle("~/Content/bootstrap_Bundle").Include(
    "~/Content/bootstrap/bootstrap-responsive.css",
    "~/Content/bootstrap/bootstrap-editable.css",
    "~/Content/bootstrap/FileUpload.css"));

必须是：

bundles.Add(
new StyleBundle("~/Content/bootstrapBundle").Include(
    "~/Content/bootstrap/bootstrap-responsive.css",
    "~/Content/bootstrap/bootstrap-editable.css",
    "~/Content/bootstrap/FileUpload.css"));

【讨论】：

【解决方案3】：

如果您使用的是 dot defender 之类的产品，它也可能会出现这种错误情况。捆绑时，如果缓存破坏者参数包含双破折号，那么像点防御者这样的产品会将其视为可能的 SQL 注入攻击并最终干扰请求/响应。

解决此问题的一种方法（假设您无法关闭该软件）是在原始 css 文件中添加一些内容，例如 .dotdefenderbuster {}。

我需要检查捆绑算法是否已更新以允许影响缓存破坏密钥。

例如： http://www.foo.com/MyApp/Content/themes/MyApp/css?v=J9DBkvB7JWRo80eUukDOe3--6DAtA1

【讨论】：