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.

Answer 1

For those that may stumble on this post... You can also resolve this by moving the @import to the first bundled item.

According to: http://webdesign.about.com/cs/css/qt/tipcssatimport.htm

@Import must always be first in the CSS document. When you bundle multipule CSS files together, it chains them into a single bundled css file. Since the second css file added to my bundle, in bundle config, contained an @Import at the start, as the files were chained together the @import appeared towards the middle of the newly merged document. Once I changed the bundle order the issue was resolved.

This is important to understand because although you can use the minified files provided by plugins like bootstrap any changes made to the non-minified files during development will not be added to the existing minified css file. Meaning you will have to make the changes twice, and navigate your way through the minified file.

Answer 2

We experienced the same issue and it turns out that bootstrap.css is the problem. We were getting the same exact minification errors that you wrote above. The bundler is having problems with @import, @keyframes and @-webkit-keyframes that are in the css file.

What we did to solve the problem is to remove bootstrap.css from the bundle and just reference it directly (or the minified version, if you have it) in the Shared/_Layout.cshtml.

@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/css")

Answer 3

Make sure the none of those .js files you are bundling end with //Some Comment. If a file ending with a double backslash // comment is tacked on to another dependent file it will be seen as one long comment causing the error you are seeing. I bet there is an //@Import at the end of one of your .js files. If that's the case I think you can probally safely change that line to /*@Import */

Also, I don't know if this was fixed in MVC5 but in MVC4 the minification parser doesn't handle the non-standard :-moz-any() and :-webkit-any() css tags.

Also look at this post that details how to resolve Less @import directories.

Answer 4

@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 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.