37

我正在尝试将 MVC 4 中的新捆绑功能与 Twitter 引导程序一起使用,在我看来,css get 中的 glyphicons png-files 的路径在某种程度上被搞砸了。这是我的代码:

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

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

4

4 回答 4

38

问题很可能是 css 文件中的图标/图像使用了相对路径,因此如果您的包与未捆绑的 css 文件不在同一个应用程序相对路径中,它们就会成为断开的链接。

我们在待办事项列表中的 css 中重新设置了 url,但现在,最简单的做法是让你的 bundle 路径看起来像 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()));
于 2012-09-25T16:31:17.210 回答
28

“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);           
    }
}
于 2013-07-17T14:38:31.637 回答
5

您可以做的是您可以转到自定义页面@iconSpritePath@iconWhiteSpritePathSprites部分进行更改,当然,还可以下载新样式。

我已将图像放在文件夹文件Content/Images夹中,并更改了路径:

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

另一种选择是从github下载所有 LESS 文件,更改variables.less文件中的相同变量,然后使用SimpLESS之类的工具重新编译bootrap.less文件。

于 2012-09-25T15:34:31.987 回答
1

对此的修复现在添加到我的AspNetBundling NuGet 包中,它解决了标准转换器中的许多其他问题,特别是在使用数据 uris 方面。也在GitHub上开源。

做就是了:

  1. Install-Package AspNetBundling
  2. 替换CssRewriteUrlTransformCssRewriteUrlTransformFixed
于 2015-12-15T11:14:05.540 回答