Как использовать внешнюю таблицу стилей для цветов материалов Angular

Question

TL; DR: Как мне сохранить переменные цвета angular material 12 в отдельном файле (@import и @use не работают)?

При использовании Angular 11 я мог бы иметь файл variables.scss для хранения цветов материалов angular, а затем использовать @import в файле styles.scss для использования этих стилей: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:

Однако, когда я обновился до angular 12, все изменилось, поэтому предыдущий подход к импорту переменных выдает ошибку:

      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);

Оказывается, чтобы подавить эту ошибку, вы должны использовать '@use' вместо '@import':styles.scss:

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

однако я получил ошибку:

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

   ---------^

Затем я попробовал:styles.scss:

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

но потом я получил эту ошибку:

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

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

Итак, как мне сохранить эти цвета в отдельном файле без ошибок?

Answer 1

Оказывается, моя проблема заключалась в том, что Angular использовал node sass вместо dart sass, и, поскольку @use не входит в node-sass, он выдал ошибку. Мне пришлось удалить папку node-sass в моих глобальных зависимостях.