Rob*_*b L 21 css asp.net-mvc-4 twitter-bootstrap bundling-and-minification
在调试模式下运行我的MVC4应用程序(因此没有缩小css/scripts)工作正常.一旦我在没有调试的情况下运行(css/scripts minified),我的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"));
}
}
所有软件包都是使用Nuget安装的(正如我所说,它在调试模式下工作正常).我的内容文件夹还包含bootstrap ... css文件的缩小版本,但不包含my.css的缩小版本.字形图标位于图像子文件夹中.
我的_Layout.cshtml看起来像这样:
<head>
...
@Styles.Render("~/bundles/maincss")
</head>
我应该补充一点,通过"非调试"模式,我的意思是在Web.config文件中设置debug ="false"选项:
<compilation debug="false" targetFramework="4.5" />
有没有人知道为什么twitter引导程序图标不会以"非调试"模式显示？
谢谢Rob
Bra*_*tie 39
我正在移动,所以我为简短的回复道歉但我稍后会更新.
长话短说,它与捆绑后相对路径被污染有关.但好消息是最新的捆绑库解决了它.
为了填补空白,基本上发生的事情是CSS文件具有相对的资源路径(在这种情况下是一个图标精灵).在调试模式下,文件分别输出到页面,以便保留/Content/bootstrap.css引用images/glyphicons-halflings.png(引用(生成完整路径/Content/images/glyphicons-halflings.png).但是,当删除调试时,文件被捆绑,路径现在相对于任何虚拟路径你给了你的包.在上面的情况下,你现在来自/bundles/maincss哪个错误的/bundles/maincss/images/glyphicons-halflings.png道路.
好消息是,这是一个已经解决的错误,从Microsoft.AspNet.Web.Optimizationv1.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"
)
);
dav*_*veb 10
我使用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');
}
然后将它包含在我的bootstrap 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"));
| 归档时间： |
|
| 查看次数： |
12327 次 |
| 最近记录： |