MVC4 bundling CSS failed Unexpected token, found '@import'

Question

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.

Answer 1

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