如何为 Angular material 颜色使用外部样式表

Question

TL; DR：如何将 angular material 12 个颜色变量存储在单独的文件中（@import 和 @use 不起作用）？

当使用 Angular 11 时，我可以有一个 variables.scss 文件来存储 angular material 颜色，然后在 styles.scss 中使用 @import 来使用这些样式： 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;
}

但是，当我更新到 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 使用节点 sass 而不是 dart sass，并且因为 @use 不是节点-sass 中的东西，它抛出了一个错误。我不得不删除全局依赖项中的 node-sass 文件夹。

如何为 Angular material 颜色使用外部样式表

How to use external stylesheet for Angular material colors

sass

angular-material

angular

angular12