自定义主题：来自 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陈述全部来自@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 并重新安装依赖项未能解决问题。

非常感谢您的帮助

Answer 1

Angular 团队已有 pending PR to fix the deprecated syntax。

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

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

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

Custom theme : deprecation warnings from Dart Sass about !global assignments

angular

sass

angular-material2