components: help(Upgrade): Unable to finish upgrade from 12 to 13 due to scss issues

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

12

Description

When upgrading from angular 12 to angular 13 of the material library the upgrade completes successfully but the build fails with cryptic error message.

Reproduction

Steps to reproduce:

1. clone https://github.com/IsraelHikingMap/Site
2. cd IsraelHiking.Web
3. upgrade angular from 12 to 13
4. upgrade material from 12 to 13
5. run npm run build:watch
6. Build fails with the following error message:

SassError: expected "{".
  ╷
1 │ @use "@angular/material" as mat;
  │                                  ^
  ╵
  src/scss/sidebar.scss 1:34  @import
  src/scss/common.scss 6:9    root stylesheet

Expected Behavior

Upgrade should complete successfully and build should pass.

Actual Behavior

Unable to use material 13 due to this cryptic error which I haven’t found a way to workaround or fix.

Environment

• Angular: 13
• CDK/Material: 13
• Browser(s): N/A
• Operating System (e.g. Windows, macOS, Ubuntu): maxOS