【问题标题】:ASP.NET MVC4 Bundling with Twitter Bootstrap与 Twitter Bootstrap 捆绑的 ASP.NET MVC4
【发布时间】:2012-09-16 15:00:59
【问题描述】:

我正在尝试将 MVC 4 中的新捆绑功能与 Twitter 引导程序一起使用,在我看来,css 中的 glyphicons 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"));

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

【问题讨论】:

    标签: asp.net twitter-bootstrap asp.net-mvc-4 bundling-and-minification asp.net-optimization


    【解决方案1】:

    你可以做的是你可以去自定义page并在Sprites部分更改@iconSpritePath@iconWhiteSpritePath,当然,下载新样式。

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

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

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

    【讨论】:

      【解决方案2】:

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

      我们在待办事项列表中对 css 中的 url 进行了 rebase,但现在,最简单的做法是让你的 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()));
      

      【讨论】:

      • hao-kung,这似乎不适用于 font-face 规则。应该吗?
      • @flipdoubt 你能发布一个例子/repro 什么不起作用?
      • 既然这不是一个网络优化技术支持论坛,我应该把它发布到一个特定的微软论坛,让我可以上传复制品之类的吗?
      • 知道它是 .NET 4.0 项目而不是 IIS Express 中的 .NET 4.5 项目而不是成熟的 IIS 是否有帮助?
      • 是的,最好的地方是在这里提出问题:aspnetoptimization.codeplex.com/workitem/list/advanced
      【解决方案3】:

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

      【讨论】:

      • this codeplex workitem 的 cmets 中,用户 MadBender 于 8 月 9 日上午 10:09 提出了似乎更简单的解决此问题的方法。
      • 这是使用虚拟目录时的答案,对我有用
      • Fix 现在添加到我的CssRewriteUrlTransformFixed 中的一个 NuGet 包中,我已经修复了标准转换器中的一系列问题。 github.com/benmccallum/AspNetBundling
      【解决方案4】:

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

      只要做:

      1. Install-Package AspNetBundling
      2. CssRewriteUrlTransform 替换为CssRewriteUrlTransformFixed

      【讨论】:

        猜你喜欢
        • 2013-04-02
        • 1970-01-01
        • 2012-09-24
        • 2012-10-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-06-21
        • 2012-07-22
        相关资源
        最近更新 更多