Expected behavior

angular.json

"styles": [
    "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
    "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
    "node_modules/animate.css/animate.css",
    "src/styles.scss"
],

style.scss

@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/colors';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/variables';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/core/variables-pro';

@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/bootstrap/bootstrap.scss';
@import './../projects/ng-uikit-pro-standard/src/lib/assets/scss/mdb.scss';

@import './src/theme/_variables.scss';

@import './src/theme/_overrides.scss';
@import './src/theme/_global.scss';

_variables.scss

$sidenav-background-color: black;

I would expect the compiled css in the browser to reflect the updated variable.

.side-nav {
    transition: 0.5s;
    background-color: #2c2f34; // This should be BLACK
    overflow-y: auto;
}

Actual behavior

No variable is updated

Resources (screenshots, code snippets etc.)