MVC4捆绑CSS失败意外的令牌，发现“@import”

我试图使用捆绑来组合和缩小一些CSS文件。 在我的Global.aspx.cs Application_Start我有以下几点：

  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); 

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

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

但是，当我查看我的捆绑CSS文件的来源时，它具有以下内容：

 /* 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"' 

….很多

任何想法如何解决这个问题？

我的确把它缩小到了下面这行：

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

如果我只有这一行代码，我得到相同的错误。

Answer 1

这里有几个问题：

1. CSS的问题是由于包括jquery.ui.all.css，因为默认的缩小器不支持以下导入，这不是你想要做的反正，因为它会包括所有的jQuery的UI CSS文件。 所以你想要做的不是使用* .css，而是显式地列出你想包含的jquery ui文件：

     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. 其次，您希望使用Script / Styles.Render方法，而不是像您所做的那样显式引用bundle url，因为在debugging模式下，助手将自动不绑定/缩小并呈现对每个脚本/样式资产的单独引用，还会将捆绑内容的指纹附加到URL中，以便浏览器cachingfunction可以正常工作。

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

3. 你也可以使用StyleBundle / ScriptBundle，它不需要传入新的Css / JsMinify就可以使用Syntaxtic糖。

您也可以查看本教程获取更多信息： 绑定教程

Answer 2

或者你可以做的是编写自己的BundleTransform for CssMinify，当然你需要这样的灵活性。 所以，例如你在BundleConfig.cs中的代码如下所示：

 using System; using System.Web.Optimization; using StyleBundle = MyNamespace.CustomStyleBundle; public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Content/themes/base/css") .IncludeDirectory("~/Content/themes/base", "*.css")); } } 

那么你需要添加的是：

 public class CustomStyleBundle : Bundle { public CustomStyleBundle(string virtualPath, IBundleTransform bundleTransform = null) : base(virtualPath, new IBundleTransform[1] { bundleTransform ?? new CustomCssMinify() }) { } public CustomStyleBundle(string virtualPath, string cdnPath, IBundleTransform bundleTransform = null) : base(virtualPath, cdnPath, new IBundleTransform[1] { bundleTransform ?? new CustomCssMinify() }) { } } public class CustomCssMinify : IBundleTransform { private const string CssContentType = "text/css"; static CustomCssMinify() { } public virtual void Process(BundleContext context, BundleResponse response) { if (context == null) throw new ArgumentNullException("context"); if (response == null) throw new ArgumentNullException("response"); if (!context.EnableInstrumentation) { var minifier = new Minifier(); FixCustomCssErrors(response); string str = minifier.MinifyStyleSheet(response.Content, new CssSettings() { CommentMode = CssComment.None }); if (minifier.ErrorList.Count > 0) GenerateErrorResponse(response, minifier.ErrorList); else response.Content = str; } response.ContentType = CssContentType; } /// <summary> /// Add some extra fixes here /// </summary> /// <param name="response">BundleResponse</param> private void FixCustomCssErrors(BundleResponse response) { response.Content = Regex.Replace(response.Content, @"@import[\s]+([^\r\n]*)[\;]", String.Empty, RegexOptions.IgnoreCase | RegexOptions.Multiline); } private static void GenerateErrorResponse(BundleResponse bundle, IEnumerable<object> errors) { StringBuilder stringBuilder = new StringBuilder(); stringBuilder.Append("/* "); stringBuilder.Append("CSS Minify Error").Append("\r\n"); foreach (object obj in errors) stringBuilder.Append(obj.ToString()).Append("\r\n"); stringBuilder.Append(" */\r\n"); stringBuilder.Append(bundle.Content); bundle.Content = stringBuilder.ToString(); } } 

如果您需要更多修正/错误，您可以在FixCustomCssErrors方法中扩展此逻辑。