MVC4 binds CSS with error Unexpected token found by '@import'

Question

I am trying to use linking to combine and minimize 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 look at the source code of my CSS bindings 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"' 

.... much more

Any ideas on how to resolve this?

I narrowed it down to the following line:

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

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

Answer 1

There are several issues here:

• The css problem is related to the inclusion of jquery.ui.all.css, since by default minifier does not support the following import operations, and this is not what you want to do anyway, all jquery ui css files. So what you want to do instead is not to use * .css, but instead explicitly specify which 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")); 

• Secondly, you want to use the Script / Styles.Render methods, rather than explicitly linking to the URL of the link, as you do, since the helpers will not automatically link / minimize and display individual links to each Script / style in debug mode, and also add a fingerprint for the contents of the package in the URL so that browser caching works properly.

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

• You can also use StyleBundle / ScriptBundle, which is just syntactic sugar, because you don't have to go through the new Css / JsMinify.

You can also read this tutorial for more information: Combining Tutorial

Answer 2

Or what you can do is write your own BundleTransform for CssMinify if you need such flexibility. So, for example, your code in BundleConfig.cs looks like this:

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

Then you need to add:

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

And if you need some more fixes / errors, you can extend this logic in the FixCustomCssErrors method.