How to use external stylesheet for Angular material colors

Question

TL; DR: How do I store angular material 12 color variables in a separate file (@import and @use doesn't work)?

When using Angular 11, I could have a variables.scss file to store angular material colors, then use @import in the styles.scss to use those styles: variables.scss:

@import '~@angular/material/theming';

@include mat-core();

$angular-version-primary: mat-palette($mat-yellow);
$angular-version-accent: mat-palette($mat-pink, A200, A100, A400);

$angular-version-warn: mat-palette($mat-red);

$angular-version-theme: mat-light-theme(
  (
    color: (
      primary: $angular-version-primary,
      accent: $angular-version-accent,
      warn: $angular-version-warn,
      pdark: mat-color($angular-version-primary, 600),
    ),
  )
);
$primary: mat-color($angular-version-primary);
$accent: mat-color($angular-version-accent);
$warn: mat-color($angular-version-warn);
@include angular-material-theme($angular-version-theme);

styles.scss:

@import 'variables';

.accent-color {
  color: $accent;
}

However, when I updated to angular 12, stuff changed, so the previous approach of importing the variables throws an error:

SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();"
        on line 10 of src/variables.scss
        from line 1 of src/styles.scss
>> @include mat.core();
   ---------^

styles.scss:

@import 'variables';

.accent-color {
  color: $accent;
}

variables.scss:

@use '~@angular/material' as mat;

@import '~@angular/material/theming';
@include mat.core();

$angular-version-primary: mat.define-palette(mat.$yellow-palette);
$angular-version-accent: mat.define-palette(
  mat.$pink-palette,
  A200,
  A100,
  A400
);


$angular-version-warn: mat.define-palette(mat.$red-palette);

$angular-version-theme: mat.define-light-theme(
  (
    color: (
      primary: $angular-version-primary,
      accent: $angular-version-accent,
      warn: $angular-version-warn,
    ),
  )
);
$primary: mat.get-color-from-palette($angular-version-primary);
$accent: mat.get-color-from-palette($angular-version-accent);
$warn: mat.get-color-from-palette($angular-version-warn);
@include mat.all-component-themes($angular-version-theme);

It turns out that in order to suppress that error, you have to use '@use' instead of '@import': styles.scss:

@use 'variables';
.accent-color {
  color: $accent;
}

however, I got a error:

SassError: Undefined variable: "$accent".
        on line 4 of src/styles.scss
>>   color: $accent;

   ---------^

I then tried: styles.scss:

@use 'variables';
.accent-color {
  color: variables.$accent;
}

but then I got this error:

SassError: Invalid CSS after "  color: variables": expected expression (e.g. 1px, bold), was ".$accent;"
        on line 4 of src/styles.scss
>>   color: variables.$accent;

   ------------------^

So, how do i store those colors in a seperate file without errors?

Answer 1

It turns out my issue was Angular was using node sass instead of dart sass, and since @use isn't a thing in node-sass, it threw an error. I had to delete the node-sass folder in my global dependencies.