css - MVC4 StyleBundle 不解析图像

Question

我的问题与此类似:

ASP.NET MVC 4 Minification & Background Images

除了如果可以的话我想坚持使用 MVC 自己的 bundle 。我脑子崩溃了，试图弄清楚指定样式包的正确模式是什么，以便独立的 css 和图像集(如 jQuery UI)工作。

我有一个带有 /Content/css/ 的典型 MVC 站点结构，其中包含我的基本 CSS，例如 styles.css。在该 css 文件夹中，我还有子文件夹，例如 /jquery-ui，其中包含其 CSS 文件和一个 /images 文件夹。 jQuery UI CSS 中的图像路径是相对于该文件夹的，我不想弄乱它们。

据我所知，当我指定一个 StyleBundle 时，我需要指定一个虚拟路径，它也不匹配真实的内容路径，因为(假设我忽略了到内容的路由)IIS 会然后尝试将该路径解析为物理文件。所以我指定:

bundles.Add(new StyleBundle("~/Content/styles/jquery-ui")
       .Include("~/Content/css/jquery-ui/*.css"));

渲染使用:

@Styles.Render("~/Content/styles/jquery-ui")

我可以看到请求发送到:

http://localhost/MySite/Content/styles/jquery-ui?v=nL_6HPFtzoqrts9nwrtjq0VQFYnhMjY5EopXsK8cxmg1

这将返回正确的、缩小的 CSS 响应。但是随后浏览器发送了一个相对链接图像的请求:

http://localhost/MySite/Content/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png

这是一个 404。

我知道我的 URL jquery-ui 的最后一部分是一个无扩展名的 URL，它是我的包的处理程序，所以我明白为什么对图像的相关请求只是 /样式/图像/。

所以我的问题是处理这种情况的正确方法是什么？

Answer 1

根据 MVC4 css bundling and image references 上的这个线程，如果您将 bundle 定义为:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css"));

如果您在与组成 bundle 的源文件相同的路径上定义 bundle ，相对图像路径仍然有效。包路径的最后一部分实际上是该特定包的 文件名(即，/bundle 可以是您喜欢的任何名称)。

这仅在您将同一文件夹中的 CSS bundle 在一起时才有效(我认为从 bundle 的 Angular 来看这是有意义的)。

更新

根据@Hao Kung 在下面的评论，或者现在可以通过应用 CssRewriteUrlTransformation ( Change relative URL references to CSS files when bundled ) 来实现。

注意:我尚未确认有关重写虚拟目录中绝对路径问题的评论，因此这可能不适用于所有人(？)。

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css",
                    new CssRewriteUrlTransform()));