MVC捆绑和CSS相对URL

Question

MVC的捆绑在使用CssRewriteUrlTransform时返回CSS图像的错误URL：

我有一个内部应用程序，其URL为：http://usid01-srv002/MyApplication。它位于IIS的“默认网站”中。

BundleConfig.cs中包含以下内容：

bundles.Add(new StyleBundle("~/bundles/jcss")
    .Include("~/Scripts/JQueryUI/css/*.css", new CssRewriteUrlTransform())
);

捆绑系统为那些CSS文件引用的任何图像生成了错误的URL，导致404错误，甚至是经过很好测试的JQueryUI的CSS文件（来自FireBug）：

例如，它正在生成

http://usid01/path/foo.png

当它应该生成时：

http://usid01/MyApplication/path/foo.png

我该如何让捆绑系统生成指向正确位置的URL？

- Charles Burns

---

你是如何定义你的CssRewriteUrlTransform类的？ - Lin

@lin：我没有。据我所知，它没有很多选项：http://msdn.microsoft.com/en-us/library/system.web.optimization.cssrewriteurltransform.process(v=vs.110).aspx - Charles Burns

你说得对，它没有很多选项。但如果这些选项没有正确设置，你就无法获得绝对路径。这个链接可能会对你有所帮助。http://aspnetoptimization.codeplex.com/workitem/83 - Lin

我理解的意思是：除非在非常简单的情况下，否则不要在CSS路径中使用捆绑（bundling），因为它会出错。直接链接已经压缩的CSS会更容易。 - Charles Burns

可能是MVC4 StyleBundle无法解析图像的重复问题。 - Amirhossein Mehrvarzi

参见：下面由Muhammad Waqas Iqbal回答的答案... 参见：https://dev59.com/VGgu5IYBdhLWcg3wZmMm - Jonathan

Answer 1

CssRewriteUrlTransform可以更新CSS URL为绝对路径，意味着如果我们使用-

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));

而我们在 "site.css" 文件中有以下的 CSS 类：

.Sandy
{
    background-image: url("Images/Sandy.jpg");
    border: 1px solid #c8c8c8;
    border-radius:4px 4px 4px 4px;
    box-shadow: 1px 1px 8px gray;
    background-position:left;
    background-size:contain;
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-repeat:no-repeat;
    min-height:100px;
    min-width:100px;
    display:block;
}

并且以下是文件夹结构 -

   -Web site Root
   -Content
   --site.css
   --Images
   ---Sandy.jpg

打包将为“background-image”生成以下CSS URL路径 -

 background-image: url("/Content/Images/Sandy.jpg");

如果您将网站/ Web应用程序托管为 Web 服务器上的网站，则以上路径将起作用， 因为浏览器将使用以下 URL 发送对此资源的请求，因为它以斜杠开头

http://<server>/content/images/sandy.jpg

但是，如果您将网站托管为Web应用程序，则会创建问题。因为浏览器仍将其解释为绝对URL而不是相对URL，并且仍会发送以下请求以获取此资源 -

   http://<server>/content/images/sandy.jpg

所以，解决这个问题的方法是即使在CSS文件中也使用相对URL，然后从Bundle配置中删除CssRewriteUrlTransform，如下所示 -

background-image: url("Images/Sandy.jpg");

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

- Bhalchandra K

---

不更改CSS，这里有另一种扩展方法可能会对某些人有所帮助。 - Shaiju T

Answer 2

原因是所定义的路径在打包时已更改，它试图找到与该新路径相关的图像。

例如，在以下代码中：

bundles.Add(new StyleBundle("~/Content/woothemes").Include( "~/Content/woothemes/css/style.css", ));

如果 style.css 中定义了任何图像路径（例如背景图），它将尝试相对于“Content/woothemes”而不是“Content/woothemes/css/”获取其路径，因此将找不到图像。

为了解决同一文件夹下的文件问题，可以通过将新路径定义为该文件夹的名称来克服此问题，如下所示：

bundles.Add(new StyleBundle("~/Content/woothemes/css").Include( "~/Content/woothemes/css/style.css", ));

这样打包后的文件路径和实际文件路径将匹配，CSS 中定义的图像将被找到，从而解决问题。

请注意，如果混合了来自不同文件夹的文件，则出于上述相同原因，该问题仍然无法解决。

- Muhammad Waqas Iqbal

---

我认为你的答案是最重要的。如果你要使用样式包，就需要理解你的 CSS 相对 URL 是相对于该包的，而且该包 URL 的最后一个令牌类似于文件而不是目录，所以在上面的例子中 "/Content/woothemes" 可以视为 "/Content/woothemes.css"，这意味着你的 URL 是相对于 "~/Content/" 的。 - Jonathan

Answer 3

这对我有效，

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/content/styles/css")" rel="stylesheet" type="text/css" />

- Adrian Tarnowski