我在手机上,所以我很抱歉简短的回复,但我稍后会更新。
读这个
长话短说,这与捆绑后相对路径被污染有关。但好消息是最新的捆绑库解决了它。
更新
为了填补空白,基本上发生的事情是 CSS 文件具有资源的相对路径(在本例中为图标精灵)。在调试模式下,文件单独输出到页面,因此引用被保留(/Content/bootstrap.css
带有对images/glyphicons-halflings.png
(制作完整路径/Content/images/glyphicons-halflings.png
)的引用。但是,当调试被删除时,文件被捆绑并且路径现在相对于任何虚拟路径你给了你的包。在上面的情况下,你现在来自/bundles/maincss
哪个导致错误的/bundles/maincss/images/glyphicons-halflings.png
路径。
好消息是,这是一个已解决的错误,从Microsoft.AspNet.Web.Optimization
v1.1.0 开始,您现在拥有CssRewriteUrlTransform
的将所有相对路径(在 CSS 文件中)替换为绝对路径对应的路径。这意味着无论您如何调用捆绑包,资源仍然会被解析。
因此,要解决此问题,您可以简单地执行以下操作:
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)
);
我唯一的疑虑是当你想要多个文件时这看起来有多难看,所以要解决这个问题,你可以使用扩展方法来简化它:
/// <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;
}
这使得上面的代码更简洁一些。(可以说我选择了一个长方法名称,但我喜欢保持方法名称在目的方面清晰)
bundles.Add(
new StyleBundle("~/bundles/maincss").IncludeWithCssRewriteTransform(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/my.css"
)
);