Question

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

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

变量.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”：样式.scss：

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

但是，我遇到了一个错误：

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

   ---------^

然后我尝试：样式.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 文件夹。

如何将外部样式表用于 Angular 材质颜色

1 个答案: