自定义主题:来自 Dart Sass 关于 !global 分配的弃用警告
Custom theme : deprecation warnings from Dart Sass about !global assignments
更新到 Angular 10 后,编译时开始出现一堆错误,都与 Material 自定义主题和 Dart Sass.
有关
示例:
DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$mat-form-field-legacy-dedupe: null` at the root of the
stylesheet.
╷
6155 │ $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@angular/material/_theming.scss 6155:3 -mat-form-field-legacy-label-floating()
node_modules/@angular/material/_theming.scss 6206:9 mat-form-field-legacy-typography()
node_modules/@angular/material/_theming.scss 6726:3 mat-form-field-typography()
node_modules/@angular/material/_theming.scss 6871:3 angular-material-typography()
node_modules/@angular/material/_theming.scss 6899:3 mat-core()
src/theme.scss 2:1 @import
stdin 36:13 root stylesheet
所有错误都是由 @include mat-core();
或 @include angular-material-theme($my-theme);
触发的,它们都存在于我的自定义 theme.scss
文件中。
但被指控的!global
陈述全部来自@angular/material
包中的_theming.scss
文件。
我尝试遵循“考虑在样式表的根部添加 $mat-form-field-legacy-dedupe: null
”的建议,但没有成功,无论我是在 styles.scss
、theme.scss
或两者中添加此指令。
自定义主题曾经有效,但我没有对其中进行任何更改;它的基本结构如下:
@import '~@angular/material/theming';
@include mat-core(); // 1st source of errors
// palettes definitions using mat-palette(…)
$my-theme: mat-light-theme(…)
@include angular-material-theme($my-theme); // 2nd source of errors
// a bunch of CSS rules
禁用自定义主题(例如注释掉 theme.scss
文件内容)当然可以解决问题。
我在网上找了一段时间的答案,但一无所获。
所有 Angular 库都是最新的。删除 node_modules
并重新安装依赖项未能解决问题。
非常感谢您的帮助
Angular 团队已有 pending PR to fix the deprecated syntax。
同时,您可以将 sass
更新到最新版本(撰写本文时为 1.35.2),然后更新加载程序配置以设置 quietDeps
选项。我不直接使用 Angular CLI,但是如果你已经“弹出”到常规的 Webpack,你可以把它放在你的样式规则中:
{
loader: "sass-loader",
options: {
sassOptions: { quietDeps: true }
}
}
更新到 Angular 10 后,编译时开始出现一堆错误,都与 Material 自定义主题和 Dart Sass.
有关示例:
DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Consider adding `$mat-form-field-legacy-dedupe: null` at the root of the
stylesheet.
╷
6155 │ $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@angular/material/_theming.scss 6155:3 -mat-form-field-legacy-label-floating()
node_modules/@angular/material/_theming.scss 6206:9 mat-form-field-legacy-typography()
node_modules/@angular/material/_theming.scss 6726:3 mat-form-field-typography()
node_modules/@angular/material/_theming.scss 6871:3 angular-material-typography()
node_modules/@angular/material/_theming.scss 6899:3 mat-core()
src/theme.scss 2:1 @import
stdin 36:13 root stylesheet
所有错误都是由 @include mat-core();
或 @include angular-material-theme($my-theme);
触发的,它们都存在于我的自定义 theme.scss
文件中。
但被指控的!global
陈述全部来自@angular/material
包中的_theming.scss
文件。
我尝试遵循“考虑在样式表的根部添加 $mat-form-field-legacy-dedupe: null
”的建议,但没有成功,无论我是在 styles.scss
、theme.scss
或两者中添加此指令。
自定义主题曾经有效,但我没有对其中进行任何更改;它的基本结构如下:
@import '~@angular/material/theming';
@include mat-core(); // 1st source of errors
// palettes definitions using mat-palette(…)
$my-theme: mat-light-theme(…)
@include angular-material-theme($my-theme); // 2nd source of errors
// a bunch of CSS rules
禁用自定义主题(例如注释掉 theme.scss
文件内容)当然可以解决问题。
我在网上找了一段时间的答案,但一无所获。
所有 Angular 库都是最新的。删除 node_modules
并重新安装依赖项未能解决问题。
非常感谢您的帮助
Angular 团队已有 pending PR to fix the deprecated syntax。
同时,您可以将 sass
更新到最新版本(撰写本文时为 1.35.2),然后更新加载程序配置以设置 quietDeps
选项。我不直接使用 Angular CLI,但是如果你已经“弹出”到常规的 Webpack,你可以把它放在你的样式规则中:
{
loader: "sass-loader",
options: {
sassOptions: { quietDeps: true }
}
}