CSS 捆绑包中的相对路径转换

本文关键字：相对 路径 转换 包中 CSS | 更新日期: 2023-09-27 18:33:41

我正在尝试为我的 MVC5 项目捆绑 CSS 文件，但遇到了相对 URL 的问题。在你捣碎重复的问题按钮之前，我已经阅读了其他类似的问题，答案还没有处理我需要处理的特定情况。

我正在处理的项目将作为常规 IIS 站点下的应用程序运行，这意味着它不会位于域的根目录。 当使用开箱即用的 URL 转换CssRewriteUrlTransform()时，这是一个问题，因为它(愚蠢地，以我的拙见(不考虑 URL 中的应用程序名称，而是生成将域根视为起始级别的绝对路径。 假设我有以下文件夹结构：

site
'--- content
     |--- css
     |    '--- style.css
     '--- images
          '--- logo.png

如果我使用这样的相对 URL：

background-image: url('../images/logo.png');

它被转换为：

background-image: url('http://domainname.com/content/images/logo.png');

问题是，我需要它在执行转换时尊重应用程序/子目录名称。解决方案还应保留查询字符串。

background-image: url('http://domainname.com/applicationname/content/images/logo.png[?querystring]

我发现的最接近的是AcidPAT在这个问题上提供的解决方案：MVC4 StyleBundle无法解析图像

但是该解决方案不适合我，因为它似乎将response.Files视为 IEnumerable，而实际上它是一个 IEnumerable - 也许这从 MVC4 更改为 MVC5。

总结

我需要一种在捆绑时自动将 CSS 中的相对路径转换为绝对路径的方法。该解决方案需要了解应用程序的实际位置，因此如果应用程序安装在域的子目录下，它应该可以工作。解决方案还需要保留相对 URL 中的任何查询字符串。

任何人都可以提供一些指导吗？

最接近的解决方案是这个要点：https://gist.github.com/dotnetchris/3d1e4fe9b0fa77eefc82 唯一的问题是它似乎与MVC5不兼容。具体来说，从第 12 行开始迭代BundleFile对象列表的块似乎将它们视为FileInfo对象，因此正在调用不存在的属性。

CSS 捆绑包中的相对路径转换

我相信这可能是CssRewriteUrlTransform的一个错误。它将解析主机，但不解析虚拟目录。这就是我改用的。它只是一个包装类，允许捆绑过程正确解析。

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
    }
}

用法。。。

bundles.Add(new StyleBundle("~/Content/css")
       .Include("~/Content/Site.css", new CssRewriteUrlTransformWrapper()));
相关文章：