问题描述
在 Asp.Net MVC 5 应用程序中,我正在我的 egisterBundles
方法中创建一个样式包.
我使用的是 jquery-ui
.
而不是单独列出所有 jquery-ui
css 文件,我使用 all.css
,它导入所有其余的.
代码看起来像这样:
In an Asp.Net MVC 5 application, I am creating a style bundle in my egisterBundles
method.
I'm using jquery-ui
.
Instead of listing all of the jquery-ui
css files individually I'm using all.css
, which imports all the rest.
The code looks like this:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/a.css",
"~/Content/b.css",
"~/Content/themes/base/all.css"));
并且 all.css 包含两行:
And all.css contains two lines:
@import "base.css";
@import "theme.css";
这有效,但只有当我设置
This works, but only when I set
BundleTable.EnableOptimizations = false.
当我设置
BundleTable.EnableOptimizations = true
然后没有任何 jquery css 加载.
then none of the jquery css loads.
当然有一个简单的解决方法;我可以单独将 jquery-ui css 文件添加到包中.
但我很好奇:为什么当 css 文件被捆绑和缩小时 all.css 会中断?
这似乎不是特定于浏览器的,因为我在两个 IE9 中都有同样的问题 和 Chrome 39.
Of course there is an easy workaround; I can individually add the jquery-ui css files to the bundle.
But I am curious: why does all.css break when the css files are bundled and minified?
This does not appear to be browser-specific, as I have the same problem in both IE9 and Chrome 39.
推荐答案
根据这个答案,默认的 minifier 根本不支持 @import 指令:
According to this answer the default minifier simply does not support the @import directive:
MVC4 捆绑 CSS 失败 Unexpected token, found '@import'
另外,jquery-ui css文件中包含了图片的相对路径,所以bundle的虚拟路径必须允许浏览器找到图片的相对路径,例如:
Also, the jquery-ui css files contain relative paths to images, so the virtual path of the bundle must allow the browser to find the relative path to the images, for example:
bundles.Add(new StyleBundle("~/Content/themes/base/jqueryui")
.Include("~/Content/themes/base/core.css" [and other desired css files]));
在 cshtml 页面上:
And on the cshtml page:
@Styles.Render("~/Content/themes/base/jqueryui")
查看此链接进行说明:MVC4 StyleBundle 无法解析图像
这篇关于BundleTable.EnableOptimizations true 会破坏 jquery-ui all.css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!