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

Not sure about other, but changes I made in Bundle.config file did not get picked up until I rebuild the project.

I guess, compiler includes the information into the compiled DLL, and no longer looks at Bundle.config.

I am using ASP.NET forms application though, not sure about MVC.

Answer 2

@import don't work with bundle minification.

Do this... in the file BundleConfig.cs set:

bundles.UseCdn = true;
bundles.Add(new StyleBundle("~/skin", "../Content/dark-skin/skin.css"));

And set this in layout:

@Styles.Render("~/skin")

But only application relative URLs (~/url) are allowed.

Answer 3

Encountered this too. I had Bootstrap in the bundle-list among with the main CSS file, in which I imported bootstrap.min.css again. So Bootstrap got requested twice. Removing the import line in my main CSS file solved this for me.

Answer 4

My solution was the same as @GraehamF, I was having issues where the @imports were trying to load the css, when you inspect with dev tools the bundle css's if you see something like "run-time error", it means the file is not loaded correctly.

Before to deploy remove the debug="true" on your web.config then try to run the code on your local box, that should give you the idea of which files are not getting loaded and causing the bundle did not work.

Answer 5

What I did was, in my BundleConfig.vb (cs), I put all the files I referenced by @import within the css files like this:

bundles.Add(New StyleBundle("~/bundle/css-account") _
                .Include("~/Content/consola/bootstrap/css/bootstrap.css",
                         "~/Content/consola/plugins/node-waves/waves.css",
                         "~/Content/consola/plugins/animate-css/animate.css", //Referenced by @import
                         "~/Content/consola/plugins/bootstrap-select/css/bootstrap-select.css",
                         "~/Content/account/account.css",
                         "~/fonts/awesome/css/font-awesome.css",//Referenced by @import
                         "~/Content/consola/materialize.css", //Referenced by @import
                         "~/Content/consola/style.css"))

That eliminated almost all the errors.

The next thing I did was modify my css files changing css pseudo-classes syntax from this [type="checkbox"]:not(.filled-in, .gm-menu-hamburger) + label:after { to this one [type="checkbox"]:not(.filled-in) + label:after, [type="checkbox"]:not(.gm-menu-hamburger) + label:after {

That solved all errors I had.

Hope that helps

Answer 6

Check if you have any minified (...min.js) files in your bundle.

    bundles.Add( ... minified files???
     ));

Remove them from the bundle and render in the _layout.cshtml file:

@Styles.Render("~/Content/fontawesome-free-5.10.1-web/css/all.min.css")

Or add the non minified version of your css to the bundle.