twitter-bootstrap MVC4 Bundles - 没有 Twitter Bootstrap 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17893004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC4 Bundles - No Twitter Bootstrap icons
提问by Rob L
Running my MVC4 app in debug mode (so no minification of css/scripts) works fine. As soon as I run without debug (css/scripts minified), my Twitter Bootstrap icons do not get displayed. Another thread on here suggested using bundles.IgnoreList.Clear(). But that does not seem to work for me. My BundleConfig.RegisterBundles(...) looks like this:
在调试模式下运行我的 MVC4 应用程序（因此没有缩小 css/脚本）工作正常。一旦我在没有调试的情况下运行（css/脚本缩小），我的 Twitter Bootstrap 图标就不会显示。这里的另一个线程建议使用bundles.IgnoreList.Clear()。但这对我来说似乎不起作用。我的 BundleConfig.RegisterBundles(...) 看起来像这样：
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
// Some JavaScript bundles only
// ...
bundles.Add(new StyleBundle("~/bundles/maincss").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/my.css"));
}
}
All packages were installed using Nuget (as I say, it works fine in debug mode). My Content folder also contains the minified versions of both the bootstrap...css files, but not a minified version of my.css. The glyph icons are in the images sub-folder.
所有软件包都是使用 Nuget 安装的（正如我所说，它在调试模式下运行良好）。我的内容文件夹还包含 bootstrap...css 文件的缩小版本，但不是 my.css 的缩小版本。字形图标位于图像子文件夹中。
My _Layout.cshtml looks like this:
我的 _Layout.cshtml 看起来像这样：
<head>
...
@Styles.Render("~/bundles/maincss")
</head>
I should add, that by "non-debug" mode, I mean setting the debug="false" option in the Web.config file:
我应该补充一点，通过“非调试”模式，我的意思是在 Web.config 文件中设置 debug="false" 选项：
<compilation debug="false" targetFramework="4.5" />
Does anyone have any idea why the twitter bootstrap icons do not show in "non-debug"mode?
有谁知道为什么 Twitter 引导程序图标不显示在“非调试”模式下？
Thanks Rob
谢谢罗布
回答by Brad Christie
I'm on mobile so my apologies for brief response but I'll update later.
我正在使用移动设备，因此对于简短的回复我深表歉意，但我稍后会更新。
Long story short it had to do with relative path being fouled after bundling. But the good news is the latest bundle library resolves it.
长话短说，它与捆绑后的相对路径被破坏有关。但好消息是最新的 bundle 库解决了这个问题。
Update
更新
To fill in the blanks, essentially what's happening is that the CSS files have relative paths to resources (in this case an icon sprite). When in debug mode, the files are output separately to the page so the references are retained (/Content/bootstrap.csswith a reference to images/glyphicons-halflings.png(making the full path /Content/images/glyphicons-halflings.png). However, when debug is removed the files are bundled and the path is now relative to whatever virtual path you gave your bundle. In the case of above, you now originate from /bundles/maincsswhich makes for an erroneous /bundles/maincss/images/glyphicons-halflings.pngpath.
为了填补空白，本质上发生的事情是 CSS 文件具有资源的相对路径（在本例中为图标精灵）。在调试模式下，文件被单独输出到页面，因此引用被保留（/Content/bootstrap.css带有引用images/glyphicons-halflings.png（制作完整路径/Content/images/glyphicons-halflings.png）。但是，当调试被删除时，文件被捆绑并且路径现在相对于任何虚拟路径你给了你的包。在上面的情况下，你现在起源/bundles/maincss于一条错误的/bundles/maincss/images/glyphicons-halflings.png路径。
The good news is that this was a resolved bugand as of Microsoft.AspNet.Web.Optimizationv1.1.0 you now have CssRewriteUrlTransformthat will replace all relative paths (within the CSS files) with their absolute-pathed counterpart. This means that no matter what you call the bundle, the resources will still be resolved.
好消息是，这是一个已解决的错误，从Microsoft.AspNet.Web.Optimizationv1.1.0 开始，您现在可以CssRewriteUrlTransform将所有相对路径（在 CSS 文件中）替换为绝对路径对应的路径。这意味着无论你叫什么包，资源仍然会被解析。
So, to fix the issue, you can simple do the following:
因此，要解决此问题，您可以简单地执行以下操作：
IItemTransform cssFixer = new CssRewriteUrlTransform();
bundles.Add(
new StyleBundle("~/bundles/maincss")
.Include("~/Content/bootstrap.css", cssFixer)
.Include("~/Content/bootstrap-responsive.css", cssFixer)
.Include("~/Content/my.css", cssFixer)
);
My only qualm is how ugly this looks when you want multiple files, so to solve this you can simplify it with an extension method:
我唯一的疑虑是当你想要多个文件时它看起来有多丑，所以要解决这个问题，你可以使用扩展方法来简化它：
/// <summary>
/// Includes the specified <paramref name="virtualPaths"/> within the bundle and attached the
/// <see cref="System.Web.Optimization.CssRewriteUrlTransform"/> item transformer to each item
/// automatically.
/// </summary>
/// <param name="bundle">The bundle.</param>
/// <param name="virtualPaths">The virtual paths.</param>
/// <returns>Bundle.</returns>
/// <exception cref="System.ArgumentException">Only available to StyleBundle;bundle</exception>
/// <exception cref="System.ArgumentNullException">virtualPaths;Cannot be null or empty</exception>
public static Bundle IncludeWithCssRewriteTransform(this Bundle bundle, params String[] virtualPaths)
{
if (!(bundle is StyleBundle))
{
throw new ArgumentException("Only available to StyleBundle", "bundle");
}
if (virtualPaths == null || virtualPaths.Length == 0)
{
throw new ArgumentNullException("virtualPaths", "Cannot be null or empty");
}
IItemTransform itemTransform = new CssRewriteUrlTransform();
foreach (String virtualPath in virtualPaths)
{
if (!String.IsNullOrWhiteSpace(virtualPath))
{
bundle.Include(virtualPath, itemTransform);
}
}
return bundle;
}
Which makes the above code a little cleaner. (Arguably I picked a long method name, but I like to keep the method names clear with regards to purpose)
这使得上面的代码更简洁一些。（可以说我选择了一个很长的方法名称，但我喜欢在目的方面保持方法名称清晰）
bundles.Add(
new StyleBundle("~/bundles/maincss").IncludeWithCssRewriteTransform(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/my.css"
)
);
回答by daveb
I ran into the same thing using Bootstrap 3.0. @brad-christie's answersolved my problem until I used NuGet to upgrade to Microsoft ASP.Net Web optimisation Framework 1.1.1. This seemed to stop the CssRewriteUrlTransformfix from working. I solved the problem by removing the references to CssRewriteUrlTransformand by creating a style sheet, bootstrap-bundle-font-fix.css, containing just the following:
我使用 Bootstrap 3.0 遇到了同样的事情。@brad-christie 的回答解决了我的问题，直到我使用 NuGet 升级到 Microsoft ASP.Net Web 优化框架 1.1.1。这似乎阻止了CssRewriteUrlTransform修复工作。我通过删除对CssRewriteUrlTransform并创建样式表bootstrap-bundle-font-fix.css的引用解决了这个问题，该样式表仅包含以下内容：
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../../Content/fonts/glyphicons-halflings-regular.eot');
src: url('../../Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../../Content/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../../Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../../Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
And then including it in my bootstrap css bundle:
然后将它包含在我的引导 css 包中：
bundles.Add(new StyleBundle("~/bundles/Content/bootstrap")
.Include("~/Content/bootstrap/bootstrap.css")
.Include("~/Content/bootstrap/bootstrap-theme.css")
.Include("~/Content/bootstrap-bundle-font-fix.css")
.Include("~/Content/sticky-footer-navbar.css"));
