如何解决如何将外部样式表用于 Angular 材质颜色
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;
------------------^
那么,我如何将这些颜色存储在一个单独的文件中而不会出错?
解决方法
事实证明我的问题是 Angular 使用的是 node sass 而不是 dart sass,而且由于 @use 不是 node-sass 中的东西,它抛出了一个错误。我不得不删除全局依赖项中的 node-sass 文件夹。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。