SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;

[Tim-arts]

Steps to reproduce:

1. Create a new Angular project
2. Try to create a custom theme following this documentation
3. Compile the SCSS file

Expected Behavior

The watcher runs and compiles successfully the SCSS file

Actual Behavior

I'm on Webstorm, which set up a SASS watcher to compile the SCSS files located in my project folder. While running the watcher it fails:

Error: Can't find stylesheet to import.
  ╷
1 │ @use '~@angular/material' as mat;
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  theme-light.scss 1:1  root stylesheet

Environment

• Angular: 12.2.5
• CDK/Material: 12.2.5
• Browser(s): Chrome Version 93.0.4577.63 (Official Build) (64-bit)
• Operating System: Windows
• NPM: 7.23.0

Additionnal information

I've tried the solution indicated right there but it doesn't work as well

[crisbeto]

You should use @use '~@angular/material' as mat; instead of @use '~@angular/material/theming' as mat;. Also in general you should use ng update to update your @angular packages, because it has automated migrations that account for breaking changes like this one.

[Tim-arts]

I was using @use '~@angular/material' as mat; but changed for @use '~@angular/material/theming' as mat; since it was not working.

ng update output ->

Using package manager: 'npm'
Collecting installed dependencies...
Found 25 dependencies.
We analyzed your package.json and everything seems to be in order. Good work!

But I still have the error.

Okay, I've ran the build compilation and it passed successfully, so it seems that the error comes from the way the watcher works and not from the Angular side. I'm closing this issue as it's not Angular relative anymore, will open an issue on the Jetbrains support website.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}