ASP.NET MVC4与Twitter Bootstrap捆绑

我试图在Twitter引导中使用MVC 4中的新捆绑function，在我看来像通向graphics文件的pathpng-files int在css get以某种方式搞砸了。 下面是我的代码：

bundles.Add(new StyleBundle("~/bundles/publiccss").Include( "~/Static/Css/bootstrap/bootstrap.css", "~/Static/Css/bootstrap/bootstrap-padding-top.css", "~/Static/Css/bootstrap/bootstrap-responsive.css", "~/Static/Css/bootstrap/docs.css")); bundles.Add(new ScriptBundle("~/bundles/publicjs").Include( "~/Static/Js/jquery-1.7.2.js", "~/Static/Js/bootstrap/bootstrap.js", "~/Static/Js/cookie/jquery.cookie.js")); 

我没有看到button上的任何图标，同样。 我在这里做错了什么？ 有什么build议么？

Answer 1

问题很可能是CSS文件中的图标/图像正在使用相对path，所以如果你的包与你的unbundled css文件不在相同的应用程序相对path中，它们将变成断开的链接。

我们在待办事项列表中用CSS来重定义URL，但现在，最简单的做法是让你的bundlepath看起来像css目录，这样相对的url就可以工作了，例如：

 new StyleBundle("~/Static/Css/bootstrap/bundle") 

更新：我们已经在1.1beta1版本中添加了对此的支持，所以要自动重写图片url，您可以添加一个新的ItemTransform，它会自动完成这个重新绑定。

 bundles.Add(new StyleBundle("~/bundles/publiccss").Include( "~/Static/Css/bootstrap/bootstrap.css", "~/Static/Css/bootstrap/bootstrap-padding-top.css", "~/Static/Css/bootstrap/bootstrap-responsive.css", "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform())); 

Answer 2

“CssRewriteUrlTransform”适用于不在虚拟目录之上运行的应用程序。

所以，如果你的应用程序在http://your-site.com/上运行，它运行的很好，但是如果在http://your-site.com/your-app/上运行，你的所有图像都会有404，因为默认的“CssFixRewriteUrlTransform”是用“/”引用你的图像。;

为了解决这个问题，我已经实现了我自己的'CssRewriteUrlTransform'这样的版本：

  public class CssFixRewriteUrlTransform : IItemTransform { private static string ConvertUrlsToAbsolute(string baseUrl, string content) { if (string.IsNullOrWhiteSpace(content)) { return content; } var regex = new Regex("url\\(['\"]?(?<url>[^)]+?)['\"]?\\)"); return regex.Replace(content, match => string.Concat("url(", RebaseUrlToAbsolute(baseUrl, match.Groups["url"].Value), ")")); } public string Process(string includedVirtualPath, string input) { if (includedVirtualPath == null) { throw new ArgumentNullException("includedVirtualPath"); } var directory = VirtualPathUtility.GetDirectory(includedVirtualPath); return ConvertUrlsToAbsolute(directory, input); } private static string RebaseUrlToAbsolute(string baseUrl, string url) { if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase)) { return url; } if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase)) { baseUrl = string.Concat(baseUrl, "/"); } return VirtualPathUtility.ToAbsolute(string.Concat(baseUrl, url)); } } 

更新：感谢superjos谁指出这是另一个解决scheme：

 public class CssRewriteUrlTransformWrapper : IItemTransform { public string Process(string includedVirtualPath, string input) { return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input); } } 

Answer 3

你可以做的是你可以去自定义页面 ，并在Sprites部分更改@iconSpritePath和@iconWhiteSpritePath ，当然，下载新的风格。

我把我的图片放在Content/Images文件夹中，我改变了path：

• /Content/Images/glyphicons-halflings.png
• /Content/Images/glyphicons-halflings-white.png

另一种方法是从github下载所有的LESS文件，在variables.less文件中更改相同的variables，并使用SimpLESS等工具重新编译bootrap.less文件。

Answer 4

现在修复了这个问题，现在添加到我的AspNetBundling NuGet包，它解决了标准变压器中的一系列其他问题，尤其是在使用数据uris时。 在GitHub上也是开源的。

做就是了：

1. Install-Package AspNetBundling
2. 用CssRewriteUrlTransformreplaceCssRewriteUrlTransformFixed