CSS not being minified when bundling in ASP.NET MVC

Question

I have two large CSS files and two large JS files. I have included them all within their own bundles you can see below: (note the use of CssMinify class was just added to see if it made a difference, it doesn't)

When I enable optimisations I can see the following in dev tools:

And when I disable optimisations I can see the following:

From what I can see, the JS files are being bundled and minified. You can tell this by the dodgey path and the fact that the size of the JS files are much smaller when optimisations is set to true. Plus when I check the response preview I can clearly see the JS is minified. Great.

However, my CSS is not being minified! This should be apparent as the CSS files are the same size in both images provided. Also, when I check the response it is clearly not minified CSS.

What have I missed? Why isn't it minifying my CSS like it is with my JS?

EDIT: I just found about 8 of these in my the dev tools preview at the top of the CSS file:

/* Minification failed. Returning unminified contents. (8205,78): run-time error CSS1062: Expected semicolon or closing curly-brace, found '='/*

Answer 1

If any of your CSS files are using an @import directive, then the CSS minifying process is known to fail as it will not follow the includes. This leaves you two options:

(1) Don't optimize your CSS files (esp. if you are not in control of them)

(2) Remove the @import statement(s) and amalgamate your CSS files

Don’t use import-css directives when bundling

"Unexpected token found" on @import directives

EDIT

In response to your edit in the question, it seems that "Bundler & Minifier doesn’t support CSS files with css variables". See here:

VS minify css gives error: CSS1062: Expected semicolon or closing curly-brace, found '-'