Question

我创建了一个新的MVC 4应用程序，并尝试迁移现有的MVC 3应用程序。一切正常，直到我尝试使用新的Bundling功能，当我捆绑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"
             ));

Answer 1

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

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

Answer 2

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

否则，您可以将捆绑包设置为与剑道所在的目录相同，如下所示：

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

Answer 3

首先，不需要缩小已经缩小的文件。 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())
);

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

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

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

5 个答案: