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

[angelaki]

Using the latest Angular Material version (13.0.0) the first line of my theme.scss throws an error:

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

I've checked the next-versions: it was working with 13.0.0-next.7 and stopped working from 13.0.0-next.8 on.

[crisbeto]

You should change the @use '~@angular/material' to @use '@angular/material'. We have an automated migration that should've cleaned it up for you. Did you update manually or through ng update?

[angelaki]

Wasn't set automatically via ng update but works just fine! 👍

The current build literally warns a million times

Warning: > styles.39057a08ff4d2181.css:9051:0: warning: "@charset" must be the first rule in the file 9051 │ @charset "UTF-8"; while it only occurred once with the previous version. Is this normal?

[crisbeto]

I haven't seen that warning before, but it seems like it's coming from a Webpack loader, rather than Sass.

[devversion]

@angelaki From what version did you run ng update? was your project already on a v13 next or RC release?

[angelaki]

Yeah, it was already - guess that's the problem. Do you want me to simulate a clean update? Grüße Tristan Sprößer

…

________________________________ From: Paul Gschwendtner ***@***.***> Sent: Thursday, November 4, 2021 12:32:17 PM To: angular/components ***@***.***> Cc: Tristan Sprößer ***@***.***>; Mention ***@***.***> Subject: Re: [angular/components] Can't find stylesheet to import: @use ***@***.***/material' as mat; (Issue #23889) @angelaki<https://github.com/angelaki> From what version did you run ng update? was your project already on a v13 next or RC release? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#23889 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AJGSUBJLSZXQPANUBTY74V3UKJVMDANCNFSM5HK3TB7Q>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[Heatmanofurioso]

I updated through ng update from v12 and I also get the charset warning across everywhere when I run my prod build

[devversion]

Yeah, it was already - guess that's the problem. Do you want me to simulate a clean update?

Not necessarily needed. We have an integration test that runs ng update for @angular/material and the CDK. It's a known "issue" that ng update will not re-run migrations when your project is already on a next version.

The charset warnings are surprising and I'm unsure if this is something caused on our end? are there any signs that made you think this is caused by Angular Material? happy to look more into this.

[Kralone]

Have the same issue after updated my angular cli with material. An issue as been raised here : angular/angular-cli#22097 and here : angular/angular-cli#22098
Hope that can bring some help !

[devversion]

Thanks @Kralone, let's track this with the CLI. it seems like there is even an fix from the CLI side for that.

Closing because:

• The charset issue is tracked with: warning: "@charset" must be the first rule in the file angular-cli#22097.
• The stylesheet import issue only surfaced because the ng update migration did not run.
  • All tilde imports with Webpack will no longer with Angular CDK/Material v13.
  • Re-run the migration with ng update @angular/cdk --migrate-only --from 12.0.0 --to 13.0.0 if you already were on v13, and the migration did not re-run.

[hheexx]

@devversion I have rerun the migration but it just nooped