VS MVC Project CSS Minification fails when using CSS variables

Question

In Visual Studio, Minification is failing for me in my MVC project when I introduce any variables in my bundled css files. Example:

/* Minification failed. Returning unminified contents.
(3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6,23): run-time error CSS1039: Token not allowed after unary operator: '-main-bg-color'
 */
:root {
    /*DEFAULT COLORS LINES*/
    --main-bg-color: rgb(34,34,34);
}
body{
background-color:var(--main-bg-color);
}

other minifiers work just fine, is there a way to fix this?

Answer 1

The BundlerMinifier library used in visual studio for magnifying CSS is currently unable to handle CSS variables.

This issue has been raised on github https://github.com/madskristensen/BundlerMinifier/issues/218 / https://github.com/xoofx/NUglify/issues/17.

Hope this helps.

Answer 2

I ended up implementing Sass as a twofold solution which allows both a multitude of variable methods along with minification.