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