MVC4捆绑CSS失败意外的原因，发现“@import” [英] MVC4 bundling CSS failed Unexpected token, found '@import'

问题描述

我试图用捆绑结合＆安培;运行如下一些CSS文件。在我Global.aspx.cs 的Application_Start 我有以下内容：

  VAR jsBundle =新包（〜/ JSBundle，新JsMinify（））;
    jsBundle.AddDirectory（〜/脚本/，* .js文件，假）;
    jsBundle.AddFile（〜/脚本/ KendoUI / jquery.min.js）;
    jsBundle.AddFile（〜/脚本/ KendoUI / kendo.web.min.js）;
    BundleTable.Bundles.Add（jsBundle）;    VAR cssBundle =新包（〜/ CSSBundle，新CssMinify（））;
    cssBundle.AddDirectory（〜/内容/，*的CSS，假）;
    cssBundle.AddDirectory（〜/内容/主题/碱/，*的CSS，假）;
    cssBundle.AddFile（〜/风格/ KendoUI / kendo.common.min.css）;
    cssBundle.AddFile（〜/风格/ KendoUI / kendo.default.min.css）;
    BundleTable.Bundles.Add（cssBundle）;
 

在我的.cshtml文件我有以下几点：

 ＆LT;链接HREF =/ CSSBundle的rel =stylesheet属性类型=文/ CSS/＆GT;
＆LT;脚本的src =/ JSBundle类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
 

然而，当我查看我的包的CSS文件的来源，它具有以下内容：

  / *缩小失败。返回unminified内容。
（40,1）：运行时错误CSS1019：意外的令牌，发现@import
（40,9）：运行时错误CSS1019：意外的令牌，发现'jquery.ui.base.css'
 

....其它更多

这是如何解决这个任何想法？

我没有缩小它下面的行：

  cssBundle.AddDirectory（〜/内容/主题/基/，*。的CSS，FALSE）;
 

如果我只有这一行code的我得到同样的错误。

解决方案

在这里有几个问题：

1. CSS的问题​​是，由于包括jquery.ui.all.css，作为默认minifier不支持以下的进口，这是不是你想要做反正，因为它会加倍包括所有的东西在jQuery UI的CSS文件。所以，你想要做什么，而不是不能用*的CSS，而是明确列出你想要什么jQuery UI的文件包括：

     bundles.Add（新StyleBundle（〜/内容/主题/基/ CSS）。包括（
           〜/内容/主题/基/ jquery.ui.core.css
           〜/内容/主题/基/ jquery.ui.resizable.css
           〜/内容/主题/基/ jquery.ui.selectable.css
           〜/内容/主题/基/ jquery.ui.accordion.css
           〜/内容/主题/基/ jquery.ui.autocomplete.css
           〜/内容/主题/基/ jquery.ui.button.css
           〜/内容/主题/基/ jquery.ui.dialog.css
           〜/内容/主题/基/ jquery.ui.slider.css
           〜/内容/主题/基/ jquery.ui.tabs.css
           〜/内容/主题/基/ jquery.ui.datepicker.css
           〜/内容/主题/基/ jquery.ui.progressbar.css
           〜/内容/主题/基/ jquery.ui.theme.css））;
    




2. 其次要使用脚本/ Styles.Render方法而不是明确引用包URL作为你正在做的，作为助手会自动未捆绑/缩小并呈现给每个脚本/风格资产单独引用当在调试模式，并且还添加了指纹的内容捆绑到URL，这样浏览器缓存将propertly工作。

     @ Scripts.Render（〜/ JSBundle），并@ Styles.Render（〜/ CSSBundle）
    




3. 您也可以使用StyleBundle / ScriptBundle这是没有在新的CSS / JsMinify通过只是syntaxtic糖。

您也可以看看这个教程的详细信息：捆绑教程

I'm trying to use bundling to combine & minify some CSS files. In my Global.aspx.cs Application_Start I have the following:

    var jsBundle = new Bundle("~/JSBundle", new JsMinify());
    jsBundle.AddDirectory("~/Scripts/", "*.js", false);
    jsBundle.AddFile("~/Scripts/KendoUI/jquery.min.js");
    jsBundle.AddFile("~/Scripts/KendoUI/kendo.web.min.js");
    BundleTable.Bundles.Add(jsBundle);

    var cssBundle = new Bundle("~/CSSBundle", new CssMinify());
    cssBundle.AddDirectory("~/Content/", "*.css", false);
    cssBundle.AddDirectory("~/Content/themes/base/", "*.css", false);
    cssBundle.AddFile("~/Styles/KendoUI/kendo.common.min.css");
    cssBundle.AddFile("~/Styles/KendoUI/kendo.default.min.css");
    BundleTable.Bundles.Add(cssBundle);

And in my .cshtml file I have the following:

<link href="/CSSBundle" rel="stylesheet" type="text/css" />
<script src="/JSBundle" type="text/javascript"></script>

However, when I view the source of my bundles CSS file, it has the following:

/* Minification failed. Returning unminified contents.
(40,1): run-time error CSS1019: Unexpected token, found '@import'
(40,9): run-time error CSS1019: Unexpected token, found '"jquery.ui.base.css"'

.... lots more

Any ideas on how to resolve this?

I did narrow it down to the following line:

cssBundle.AddDirectory("~/Content/themes/base/", "*.css", false);

If I only have that line of code I get the same errors.

解决方案

There are a few issues here:

1. The css issue is due to including the jquery.ui.all.css, as the default minifier doesn't support following imports, and this is not what you want to do anyways as it would double include all of the jquery ui css files. So what you want to do instead is not use *.css, and instead explicitly list what jquery ui files you want to include:

    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
           "~/Content/themes/base/jquery.ui.core.css",
           "~/Content/themes/base/jquery.ui.resizable.css",
           "~/Content/themes/base/jquery.ui.selectable.css",
           "~/Content/themes/base/jquery.ui.accordion.css",
           "~/Content/themes/base/jquery.ui.autocomplete.css",
           "~/Content/themes/base/jquery.ui.button.css",
           "~/Content/themes/base/jquery.ui.dialog.css",
           "~/Content/themes/base/jquery.ui.slider.css",
           "~/Content/themes/base/jquery.ui.tabs.css",
           "~/Content/themes/base/jquery.ui.datepicker.css",
           "~/Content/themes/base/jquery.ui.progressbar.css",
           "~/Content/themes/base/jquery.ui.theme.css"));
   

2. Secondly you want to be using the Script/Styles.Render methods rather than explicitly referencing the bundles url as you are doing, as the helpers will automatically not bundle/minify and render individual references to each script/style asset when in debug mode, and also append a fingerprint for the bundle contents into the url so browser caching will work propertly.

   @Scripts.Render("~/JSBundle") and @Styles.Render("~/CSSBundle")
   

3. You can also use StyleBundle/ScriptBundle which is just syntaxtic sugar for not having to pass in new Css/JsMinify.

You can also check out this tutorial for more info: Bundling Tutorial

这篇关于MVC4捆绑CSS失败意外的原因，发现“@import”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！