Question

我正在尝试使用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"));

我没有在按钮上看到任何图标，同样如此。我在这里做错了吗？有什么建议吗？

Answer 1

问题很可能是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()));

Answer 2

'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);           
    }
}

Answer 3

您可以执行的操作是：您可以转到自定义page并更改精灵部分中的@iconSpritePath和@iconWhiteSpritePath，当然，也可以下载新风格。

我已将我的图片放在Content/Images文件夹中，并且我已更改路径：

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

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

Answer 4

现在已将此问题添加到我的AspNetBundling NuGet包中，该包解决了标准转换器中的许多其他问题，尤其是在使用data-uris时。也是GitHub开源的。

只是做：

Install-Package AspNetBundling
将CssRewriteUrlTransform替换为CssRewriteUrlTransformFixed

ASP.NET MVC4捆绑Twitter Bootstrap

4 个答案: