我的问题与此类似:
ASP.NET MVC 4小型化和;背景图像
除了我想坚持MVC自己的捆绑,如果可以的话。我在试图弄清楚指定样式包的正确模式是什么,例如独立css和图像集(如jQueryUI)可以工作,这让我头脑崩溃
我有一个典型的MVC站点结构,包含/Content/css/,其中包含我的基本css,如style.css。在这个css文件夹中,我还有一些子文件夹,比如/jqueryui,其中包含css文件和一个/images文件夹。jQueryUICSS中的图像路径是相对于该文件夹的,我不想弄乱它们
据我所知,当我指定StyleBundle时,我需要指定一个与实际内容路径不匹配的虚拟路径,因为(假设我忽略了到内容的路由)IIS会尝试将该路径解析为物理文件。所以我要具体说明:
bundles.Add(新样式包(“~/Content/styles/jqueryui”)
.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
我知道我的URLjqueryui的最后一部分是一个无扩展的URL,是我的bundle的处理程序,因此我可以理解为什么图像的相对请求只是/styles/images/
所以我的问题是,处理这种情况的正确方法是什么
根据MVC4 css捆绑和图像引用上的此线程,如果您将捆绑定义为:
bundles.Add(新样式包(“~/Content/css/jqueryui/bundle”)
.Include(“~/Content/css/jquery ui/*.css”);
如果在与组成捆绑包的源文件相同的路径上定义捆绑包,则相对图像路径仍然有效。bundle路径的最后一部分实际上是该特定bundle的文件名(即,/bundle可以是您喜欢的任何名称)
只有当您从同一个文件夹(我认为从捆绑的角度来看这是有意义的)将CSS捆绑在一起时,这才有效
更新
根据@Hao Kung在下面的评论,或者现在可以通过应用cssrwriteurltransformation(在绑定时更改CSS文件的相对URL引用)来实现
注意:我尚未确认有关在虚拟目录中重写到绝对路径的问题的评论,因此这可能不适用于所有人(?。
bundles.Add(新样式包(“~/Content/css/jqueryui/bundle”)
.Include(“~/Content/css/jquery ui/*.css”,
新CSSRWriteUrlTransform());