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

编程问答 2022-05-01

问题描述

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


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

$angular-version-theme: mat.define-light-theme(
  (
    color: (
      primary: $angular-version-primary,)
);
$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;

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

那么，我如何将这些颜色存储在一个单独的文件中而不会出错？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular-materialangular12sass