自定义主题：来自 Dart Sass 的关于 !global 赋值的弃用警告

Question

更新到 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陈述都是来自_theming.scss文件中的文件@angular/material。

我尝试遵循“考虑$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并重新安装依赖项并没有解决问题。

非常感谢您的帮助

Answer 1

Angular 团队已经有一个待处理的 PR 来修复已弃用的语法。

同时，您可以将您的版本更新sass到最新版本（撰写本文时为 1.35.2），然后更新您的加载程序配置以设置该quietDeps选项。我不直接使用 Angular CLI，但如果您已“弹出”到常规 Webpack，则可以将其放入样式规则中：

{
  loader: "sass-loader",
  options: {
    sassOptions: { quietDeps: true }
  }
}