我的问题与此类似:
ASP。NET MVC 4缩小和背景图像
除了我想坚持MVC自己的捆绑如果我可以的话。我有一个大脑崩溃试图找出什么是正确的模式是指定样式包，如独立的css和图像集，如jQuery UI工作。
我有一个典型的MVC网站结构与/Content/css包含我的基本css，如样式。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，我的包的处理程序，所以我可以看到为什么图像的相对请求是简单的/styles/images/。
所以我的问题是，怎样处理这种情况才是正确的?
根据MVC4 css bundle和图片引用的这个线程，如果你定义你的bundle为:
bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
.Include("~/Content/css/jquery-ui/*.css"));
如果将bundle定义在与组成bundle的源文件相同的路径上，则相对映像路径仍然有效。bundle路径的最后一部分实际上是特定bundle的文件名(例如，/bundle可以是您喜欢的任何名称)。
这只在你将CSS从同一个文件夹中捆绑在一起时才有效(我认为从捆绑的角度来看这是有意义的)。
更新
根据下面@Hao Kung的评论，这也可以通过应用CssRewriteUrlTransformation(在捆绑时更改CSS文件的相对URL引用)来实现。
注意:我还没有确认关于重写到虚拟目录中的绝对路径的问题的评论，所以这可能不适用于每个人(?)
bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
.Include("~/Content/css/jquery-ui/*.css",
new CssRewriteUrlTransform()));
根据MVC4 css bundle和图片引用的这个线程，如果你定义你的bundle为:
bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
.Include("~/Content/css/jquery-ui/*.css"));
如果将bundle定义在与组成bundle的源文件相同的路径上，则相对映像路径仍然有效。bundle路径的最后一部分实际上是特定bundle的文件名(例如，/bundle可以是您喜欢的任何名称)。
这只在你将CSS从同一个文件夹中捆绑在一起时才有效(我认为从捆绑的角度来看这是有意义的)。
更新
根据下面@Hao Kung的评论，这也可以通过应用CssRewriteUrlTransformation(在捆绑时更改CSS文件的相对URL引用)来实现。
注意:我还没有确认关于重写到虚拟目录中的绝对路径的问题的评论，所以这可能不适用于每个人(?)
bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
.Include("~/Content/css/jquery-ui/*.css",
new CssRewriteUrlTransform()));
Grinn / ThePirat解决方案效果很好。
我不喜欢它的新包括方法在捆绑，并在内容目录中创建临时文件。(它们最终被检入、部署，然后服务无法启动!)
因此，为了遵循捆绑的设计，我选择执行本质上相同的代码，但在IBundleTransform实现中::
class StyleRelativePathTransform
: IBundleTransform
{
public StyleRelativePathTransform()
{
}
public void Process(BundleContext context, BundleResponse response)
{
response.Content = String.Empty;
Regex pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase);
// open each of the files
foreach (FileInfo cssFileInfo in response.Files)
{
if (cssFileInfo.Exists)
{
// apply the RegEx to the file (to change relative paths)
string contents = File.ReadAllText(cssFileInfo.FullName);
MatchCollection matches = pattern.Matches(contents);
// Ignore the file if no match
if (matches.Count > 0)
{
string cssFilePath = cssFileInfo.DirectoryName;
string cssVirtualPath = context.HttpContext.RelativeFromAbsolutePath(cssFilePath);
foreach (Match match in matches)
{
// this is a path that is relative to the CSS file
string relativeToCSS = match.Groups[2].Value;
// combine the relative path to the cssAbsolute
string absoluteToUrl = Path.GetFullPath(Path.Combine(cssFilePath, relativeToCSS));
// make this server relative
string serverRelativeUrl = context.HttpContext.RelativeFromAbsolutePath(absoluteToUrl);
string quote = match.Groups[1].Value;
string replace = String.Format("url({0}{1}{0})", quote, serverRelativeUrl);
contents = contents.Replace(match.Groups[0].Value, replace);
}
}
// copy the result into the response.
response.Content = String.Format("{0}\r\n{1}", response.Content, contents);
}
}
}
}
然后将其封装在一个Bundle实现中:
public class StyleImagePathBundle
: Bundle
{
public StyleImagePathBundle(string virtualPath)
: base(virtualPath)
{
base.Transforms.Add(new StyleRelativePathTransform());
base.Transforms.Add(new CssMinify());
}
public StyleImagePathBundle(string virtualPath, string cdnPath)
: base(virtualPath, cdnPath)
{
base.Transforms.Add(new StyleRelativePathTransform());
base.Transforms.Add(new CssMinify());
}
}
示例用法:
static void RegisterBundles(BundleCollection bundles)
{
...
bundles.Add(new StyleImagePathBundle("~/bundles/Bootstrap")
.Include(
"~/Content/css/bootstrap.css",
"~/Content/css/bootstrap-responsive.css",
"~/Content/css/jquery.fancybox.css",
"~/Content/css/style.css",
"~/Content/css/error.css",
"~/Content/validation.css"
));
下面是我的RelativeFromAbsolutePath扩展方法:
public static string RelativeFromAbsolutePath(this HttpContextBase context, string path)
{
var request = context.Request;
var applicationPath = request.PhysicalApplicationPath;
var virtualDir = request.ApplicationPath;
virtualDir = virtualDir == "/" ? virtualDir : (virtualDir + "/");
return path.Replace(applicationPath, virtualDir).Replace(@"\", "/");
}
