自定义主题：来自 Dart Sass 的关于 !global assignments 的弃用警告答案

【问题标题】：Custom theme : deprecation warnings from Dart Sass about !global assignments自定义主题：来自 Dart Sass 的关于 !global assignments 的弃用警告
【发布时间】：2021-07-12 22:11:38
【问题描述】：

更新到Angular 10后，编译时开始出现一堆错误，都与Material custom theming和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 sass angular-material2

【解决方案1】：

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

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

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

【讨论】：