MVC 4 Bundling 导致 Kendo UI 中缺少图像答案

【问题标题】：MVC 4 Bundling causes missing image in Kendo UIMVC 4 Bundling 导致 Kendo UI 中缺少图像
【发布时间】：2013-12-13 00:00:42
【问题描述】：

我创建了一个新的 MVC 4 应用程序并尝试迁移现有的 MVC 3 应用程序。一切正常，直到我尝试使用新的捆绑功能，当我捆绑 Kendo css 文件时，下拉菜单和数字文本框上的箭头消失了。它们功能正常，只是缺少图像。这些文件似乎捆绑得很好。我进行了广泛的研究，并尝试重命名文件以删除“min”，但仍然存在同样的问题。

这是我要打包的文件：

 <link href="@Url.Content("~/Content/kendo/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.default.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />

当我像这样捆绑它们时，问题就出现了：

 bundles.Add(new StyleBundle("~/Content/cssBundle").Include(
             "~/Content/kendo/kendo.common.min.css",
             "~/Content/kendo/kendo.default.min.css",
             "~/Content/kendo/kendo.blueopal.min.css"
             ));

【问题讨论】：

您仍然拥有缩小的文件。 ASP.NET MVC 捆绑忽略以 .min.css 或 .min.js 结尾的文件
@Ufuk Hacıoğulları，谢谢。我将文件重命名为不包括 min 部分，因为我读过你可以这样做，但行为相同。

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

【解决方案1】：

我遇到了同样的问题。 CssRewriteUrlTransform 应该可以解决问题：

.Include("~/Content/kendo/2014.1.318/kendo.common.min.css", new CssRewriteUrlTransform())

【讨论】：

这个真的应该是答案。我们最近尝试过它并且它有效。

【解决方案2】：

首先，不需要缩小已经缩小的文件。 StyleBundle 类将尝试再次缩小 Kendo .min 文件，这是不必要的。请改用Bundle 类。

其次，.Include() 方法采用第二个参数params IItemTransform[] transforms。您可以将 new CssRewriteUrlTransform() 作为该参数传递，因此您的 CSS 将具有正确的路径。

例子：

bundles.Add(new Bundle("~/Content/cssBundle")
    .Include("~/Content/kendo/kendo.common.min.css", new CssRewriteUrlTransform()),
    .Include("~/Content/kendo/kendo.default.min.css", new CssRewriteUrlTransform()),
    .Include("~/Content/kendo/kendo.blueopal.min.css", new CssRewriteUrlTransform())
);

【讨论】：

【解决方案3】：

我知道这很痛苦，但我通常只是修改 .css 文件并执行查找/替换以获取正确的路径。

否则，您可以将 bundle 设置为与 Kendo 所在的目录相同，如下所示：

bundles.Add(new StyleBundle("~/Content/kendo").Include(
             "~/Content/kendo/kendo.common.min.css",
             "~/Content/kendo/kendo.default.min.css",
             "~/Content/kendo/kendo.blueopal.min.css"
             ));

【讨论】：

【解决方案4】：

我能够通过在我的应用程序中为问题位置配置路由来解决此问题。

// Route for bundles problem.
routes.MapRoute("ResourcesFix", "bundles/{folder}/{path}", 
    new { controller = "Redirect", action = "Index" });

// Redirect for requests.
public class RedirectController : Controller
{
    public ActionResult Index(String folder, String path)
    {
        return Redirect("~/Content/kendo/" + 
          WebConfigurationManager.AppSettings["KendoVersion"] + "/" + folder + "/" + path);
    }
}

【讨论】：

【解决方案5】：

添加以下类扩展，

 public static class BundleConfigExt
    {
        public static Bundle CustomCssInclude(this Bundle bundle, params string[] virtualPaths)
        {
            foreach (var virtualPath in virtualPaths)
            {
                if (virtualPath.IndexOf("~/Content/kendo/") > -1) //OR
                //// if (virtualPath.IndexOf("~/Content/kendo/") > -1 || virtualPath.IndexOf("~/Content/ExternalCss/") > -1)
                {
                    bundle.Include(virtualPath, new CssRewriteUrlTransform());
                }
                else
                {
                    bundle.Include(virtualPath);
                }
            }

            return bundle;
        }
    }

调用 .CustomCssInclude() 扩展方法而不是 .Include()，

bundles.Add(new StyleBundle("~/Bundles/AllArabicCss").CustomCssInclude(
                "~/Content/bootstrap.min.css",
                "~/Content/kendo/kendo.common.*",
                "~/Content/kendo/kendo.default.min.css",
                //...
                "~/Content/kendo/kendo.bootstrap.min.css",
                "~/Content/ExternalCss/custom.css",
                "~/Content/ExternalCss/tab-responsive.css",
                "~/Content/ExternalCss/mobile-responsive.css"));

【讨论】：