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

Question

After updating to Angular 10, a bunch of errors started to appear at compile time, all related to Material custom theming and Dart Sass.

Example :

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

All errors are triggered either by @include mat-core(); or @include angular-material-theme($my-theme);, both present in my custom theme.scss file.

But the incriminated !global statements are all coming from _theming.scss file in @angular/material package.

I tried following the advice "Consider adding $mat-form-field-legacy-dedupe: null at the root of the stylesheet", with no success, whether I add this instruction in styles.scss, theme.scss or both.

The custom theme used to work and I changed nothing in it; it is basically structured as follows:

@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

Disabling the custom theme (commenting out the theme.scss file contents for example) of course solves the problem.

I looked for answers online for a while but found nothing.

All Angular libraries are up to date. Deleting node_modules and reinstalling dependencies didn't solve the issue.

Thanks a lot for any help

Answer 1

The Angular team already has a pending PR to fix the deprecated syntax.

In the meantime, you can update your sass to the latest version (1.35.2 as of this writing), then update your loader configuration to set the quietDeps option. I don't use the Angular CLI directly, but if you've "ejected" to regular Webpack, you can put this in your style rule:

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