ASP.NET MVC4与Twitter的引导捆绑(ASP.NET MVC4 Bundling wi

我试图使用新的捆绑功能，在MVC 4与Twitter的引导，似乎对我来说，到glyphicons PNG-文件的路径诠释的CSS获取的以某种方式搞砸了。继承人我的代码：

 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"));

我没有看到上的按钮，同样任何图标。难道我做错了什么吗？有什么建议？

Answer 1:

问题是最有可能的图标/在CSS文件图像是使用相对路径，所以如果你的包不居住在作为您的未捆绑css文件相同的应用程序相对路径，他们成为损坏的链接。

我们有我们的待办事项列表在CSS中垫底的网址，但就目前而言，easist要做的是让你的包路径看起来像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：

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