Ionic 4 css var

Within my variables.scss file I have:

:root {
  --ion-color-primary: #00A9E0;
  --ion-color-secondary: #5BC500;
  --ion-color-danger: #f53d3d;
  --ion-color-light: #f4f4f4;
  --ion-color-dark: #222222;
  --ion-color-gray: #8B8B8B;
  --primaryContrast: darken(#00A9E0, 10%);
  --lightContrast: darken(#f4f4f4, 10%);
  --darkHighlight: lighten(#222, 10%);
  --grayHighlight: lighten(#8B8B8B, 10%);
  --grayContrast: darken(#8B8B8B, 10%);
  --secondaryContrast: darken(#5BC500, 10%);
  --card-ios-border-radius: 8px;
  --card-ios-box-shadow: $box-shadow;
  --card-ios-header-color: var(--ion-color-light);
  --card-ios-header-font-weight: bold; 
  --background-color: var(--ion-color-light);
  --toolbar-background: var(--ion-color-primary);
  --button-round-border-radius: 10px !important;
  --loading-ios-spinner-color: var(--primaryContrast);
  --loading-ios-text-color: var(--primaryContrast);
  --border-radius: 10px;
  --box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
  --padding: 16px; 
}

And within my global.scss file I have:

h1, h2, h3, h4, h5, h6 {
    color: var(--primaryContrast);
    font-weight: bold;
}

However, this does not work, it does not load the value, nor the sources that I have configured

@font-face {
    font-family: 'Test';
    src: url('assets/fonts/test/Regular/test-Regular.eot') format('embedded-opentype'),
        url('assets/fonts/test/Regular/test-Regular.svg') format('svg'),
        url('assets/fonts/test/Regular/test-Regular.ttf') format('truetype'),
        url('assets/fonts/test/Regular/test-Regular.woff') format('woff');
    font-style: normal;
    font-weight: normal;
}