MVC 捆绑和 CSS 相对 URL

Posted 2023-03-27

【中文标题】MVC 捆绑和 CSS 相对 URL

【英文标题】：MVC Bundling and CSS relative URLs

【发布时间】：2013-12-27 08:42:47

【问题描述】：

当使用 CssRewriteUrlTransform 时，MVC 的捆绑在 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？

【问题讨论】：

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

@lin：我没有。据我所知，它没有很多选择：msdn.microsoft.com/en-us/library/…

你说得对，它没有太多选择。但如果这些选项设置不正确，您将无法获得绝对路径。此链接可能会对您有所帮助。 aspnetoptimization.codeplex.com/workitem/83

我从中得到的：不要在带有路径的 CSS 上使用捆绑，因为它被破坏了，除非在非常简单的情况下。直接链接缩小的 CSS 要容易得多。

MVC4 StyleBundle not resolving images的可能重复

【参考方案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

捆绑将为“背景图像”生成以下 CSS 网址路径 -

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

【讨论】：

不改变CSS here 是另一种扩展方法，它可能对某人有所帮助。

【参考方案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中定义的图像，因此问题将得到解决

如果您出于上述相同原因混合来自不同文件夹的文件，问题将无法解决

【讨论】：

您的回答在我看来是最重要的。如果您要使用样式包，重要的是要了解您的 css 相对 url 将相对于包，并且包 url 上的最后一个标记类似于文件，而不是目录，因此在上面的示例中“ ~/Content/woothemes”可以被认为是“~/Content/woothemes.css”，这意味着你的网址是相对于 ~/Content/

【参考方案3】：

这对我有用，

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