Laravel webpack mix elimina variables CSS después de compilar.

Tengo este archivo .scss en mi proyecto Laravel:

scss
:root {
background-color: #bada55;
#{‘–bada-boom’}: #bada55;
–#{bada-bumm}: pink;
}

Espero obtener este resultado:
css
:root {
background-color: #bada55;
–bada-boom: #bada55;
–bada-bumm: pink;
}

Pero obtengo esto:

css
:root {
background-color: #bada55;
}

Tengo este archivo webpack.mix.js:

const mix = require('laravel-mix');
const fs = require('fs');
const webpack = require('webpack');
const domain = process.env.APPURL.replace(/https?:///, '');
const mixPath = domain.replace(/./g, '');

if (mix.inProduction()) {
    mix.version();
}

mix.js('resources/' + domain + '/js/app.js', 'public/' + mixPath + '/js')
    .vue()
    .sass('resources/' + domain + '/css/app.scss', 'public/' + mixPath + '/css')
    .options({
        postCss: [
            require('postcss-css-variables')()
        ]
    })
    .copyDirectory('resources/' + domain + '/img/', 'public/' + mixPath + '/img');

mix.webpackConfig({
    plugins: [
        new webpack.DefinePlugin({
            VUEOPTIONSAPI: true,
            VUEPRODDEVTOOLS: false,
        }),
    ],
});

No encontré ninguna referencia en la documentación para resolver este problema y no estoy seguro de dónde proviene este problema. ¿Es un problema o error de webpack, post-css o cualquier otra herramienta? ¿O simplemente configuré algo mal?

¿Alguna idea?