Minification failed. Returning unminified contents

Question

I have made my first website using MVC 5 which works fine on my local machine but when I publish it to the server some of the CSS is not minifying correctly.

    /* Minification failed. Returning unminified contents.
    (80,1): run-time error CSS1019: Unexpected token, found '@import'
    (80,9): run-time error CSS1019: Unexpected token, found 'url('../Content/dark-skin/skin.css')'
    (671,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
    (1288,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
    (1680,1): run-time error CSS1019: Unexpected token, found '@keyframes'
    (1682,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
    (1685,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
    (1687,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
     */
    /* NUGET: BEGIN LICENSE TEXT
     *
     * Microsoft grants you the right to use these script files for the sole
     * purpose of either: (i) interacting through your browser with the Microsoft
     * website or online service, subject to the applicable licensing or use
     * terms; or (ii) using the files as included with a Microsoft product subject
     * to that product's license terms. Microsoft reserves all other rights to the
     * files not expressly granted by Microsoft, whether by implication, estoppel
     * or otherwise. The notices and licenses below are for informational purposes only.
     *
     * NUGET: END LICENSE TEXT */
    /*!
     * Bootstrap v3.0.0
     *
     * Copyright 2013 Twitter, Inc
     * Licensed under the Apache License v2.0
     * http://www.apache.org/licenses/LICENSE-2.0
     *
     * Designed and built with all the love in the world by @mdo and @fat.
     *//*! normalize.css v2.1.0 | MIT License | git.io/normalize */

After trying to correct some of the errors and publishing again the error looks the same.

The strangest part is with bootstrap.css which I have slightly modified for the purpose of the website. When I publish it the changes are not in the bundle file. Is it possible that bootstrap is loaded from Bootstrap server and not my project?

    bundles.Add(new StyleBundle("~/Content/cssmain").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/ilightbox.css",
                      "~/Content/bannerscollection_zoominout.css"));

I have also tried to do minification myself using web application but my changes are not visible and the files do not appear to be minified.

Any help is appreciated.

Answer 1

I resolved the problem bundling bootstrap.css by doing 2 things:

1. Include the bootstrap.css first in the bundle. The code sample in the question already does this, but I was not.
2. Add the official minified version (bootstrap.min.css) to the project in the same directory as the unminified version. This prompts the bundler to use the existing minified file instead of trying (and failing) to minify bootstrap.css itself. See the green arrow in the screenshot below.

Note that if you are using a specific theme, substitute bootstrap.css and bootstrap.min.css with the files provided by the theme. Here's the working code from my project that uses the spacelab theme:

            bundles.Add(new StyleBundle(GetStyleBundlePath("bootstrap")).Include(
            "~/Content/3rdParty/bootstrap.spacelab.css",
            "~/Content/3rdParty/bootstrap-datepicker.css",
            "~/Content/3rdParty/bootstrap-multiselect.css"));