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

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

Answer 2

Minification Problem Solution:

I know Two types of possible that cause optimization problem :

The invalid CSS files that should be validated before bundling. here is W3C CSS validation service to meet this purpose.

Also considering that Microsoft Optimizer reads content of target resources for minification process, so by using some special phrases like @ sourceMappingURL=jquery.min.map in a JavaScript file or @charset "UTF-8"; in a styleSheet file, the Minification will be failed again. So try to remove or comment them.

Note that by default, Bundling process can't build relative path of image resources in css or js files.

Relative Image Path Solution:

You can use the same path as bundling path like:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
       .Include("~/Content/css/jquery-ui/*.css"));

Where you define the bundle on the same path as the source files that made up the bundle, the relative path of image resources will still work( i.e. /bundle can be any name you like).

Or using new CssRewriteUrlTransform() as second parameter like:

bundles.Add(new StyleBundle("~/Content/css/bundle")
    .Include("~/Content/css/*.css", new CssRewriteUrlTransform()));

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

The issue for me was I had @import in a .css file.

I moved my code into a corresponding .less file that gets compiled on build, which resolved the build error for me. Compiled with Gulp.

Answer 5

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 6

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.