我正在尝试使用Twitter引导程序在MVC 4中使用新的捆绑功能,在我看来,像css的字形png文件的路径以某种方式搞砸了。继承我的代码:
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"));
我没有在按钮上看到任何图标,同样如此。我在这里做错了吗?有什么建议吗?
答案 0 :(得分:38)
问题很可能是css文件中的图标/图像使用的是相对路径,因此如果您的捆绑包与非捆绑式css文件位于相同的应用程序相对路径中,则它们会成为断开的链接。
我们在todo列表中有css中的rebasing url,但是现在,最简单的方法是让你的bundle路径看起来像css目录,这样相对的url才能正常工作,即:
new StyleBundle("~/Static/Css/bootstrap/bundle")
更新:我们已在1.1beta1版本中添加了对此功能的支持,因此要自动重写图片网址,您可以添加一个新的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()));
答案 1 :(得分:24)
'CssRewriteUrlTransform'适用于不在虚拟目录之上运行的应用程序。
所以,如果您的应用程序在http://your-site.com/上运行,它运行得很好,但如果在http://your-site.com/your-app/上运行,您的所有图片都会有404,因为默认的'CssFixRewriteUrlTransform'正在引用您的图片a'/'。
要解决这个问题,我已经实现了我自己的'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指出那是另一个解决方案:
public class CssRewriteUrlTransformWrapper : IItemTransform
{
public string Process(string includedVirtualPath, string input)
{
return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
}
}
答案 2 :(得分:5)
您可以执行的操作是:您可以转到自定义page并更改精灵部分中的@iconSpritePath
和@iconWhiteSpritePath
,当然,也可以下载新风格。
我已将我的图片放在Content/Images
文件夹中,并且我已更改路径:
/Content/Images/glyphicons-halflings.png
/Content/Images/glyphicons-halflings-white.png
另一种方法是从github下载所有LESS文件,更改 variables.less 文件中的相同变量并重新编译 bootrap.less 文件使用像SimpLESS这样的工具。
答案 3 :(得分:1)
现在已将此问题添加到我的AspNetBundling NuGet包中,该包解决了标准转换器中的许多其他问题,尤其是在使用data-uris时。也是GitHub开源的。
只是做:
Install-Package AspNetBundling
CssRewriteUrlTransform
替换为CssRewriteUrlTransformFixed