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

[devversion]

@hheexx when you ran ng update, was your project already on a v13 next or RC release?

[hheexx]

@devversion nope, latest patch od 12.x

[devversion]

that's interesting. We have an integration test for this, so I'm surprised. The original poster of this issue was on a v13 next release already, so that explains this scenario.

If you have more details, a new issue would be appreciated. If others also run into this, and are not on v13 when running ng update, please also submit an issue.

it looks like we haven't gotten any other reports so far. I will try to re-check the migration again in our docs app v12.

[devversion]

Just re-tested, the migration ran as expected on the material.angular.io v12 app:

$ ng update @angular/material @angular/material-experimental @angular/cdk-experimental
Using package manager: 'yarn'
Collecting installed dependencies...
Found 61 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular/cdk @ "13.0.0" (was "12.2.12")...
    Updating package.json with dependency @angular/cdk-experimental @ "13.0.0" (was "12.2.12")...
    Updating package.json with dependency @angular/material @ "13.0.0" (was "12.2.12")...
    Updating package.json with dependency @angular/material-experimental @ "13.0.0" (was "12.2.12")...
    Updating package.json with dependency @angular/material-moment-adapter @ "13.0.0" (was "12.2.12")...
    Updating package.json with dependency material-components-web @ "14.0.0-canary.1af7c1c4a.0" (was "12.0.0-canary.5f00e454a.0")...
  UPDATE package.json (4221 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cdk' **

> Updates the Angular CDK to v13.

      ✓  Updated Angular CDK to version 13

  UPDATE scenes/src/styles.scss (1167 bytes)
  UPDATE src/styles.scss (485 bytes)
  UPDATE src/_app-theme.scss (2514 bytes)
  UPDATE src/app/pages/component-category-list/_component-category-list-theme.scss (1178 bytes)
  UPDATE src/app/pages/component-sidenav/_component-sidenav-theme.scss (1612 bytes)
  UPDATE src/app/pages/component-viewer/_component-viewer-theme.scss (569 bytes)
  UPDATE src/app/pages/guide-list/_guide-list-theme.scss (778 bytes)
  UPDATE src/app/pages/homepage/_homepage-theme.scss (1537 bytes)
  UPDATE src/app/pages/not-found/_not-found-theme.scss (657 bytes)
  UPDATE src/app/shared/carousel/_carousel-theme.scss (448 bytes)
  UPDATE src/app/shared/cookie-popup/cookie-popup.scss (538 bytes)
  UPDATE src/app/shared/cookie-popup/_cookie-popup-theme.scss (606 bytes)
  UPDATE src/app/shared/example-viewer/_example-viewer-theme.scss (1036 bytes)
  UPDATE src/app/shared/footer/_footer-theme.scss (392 bytes)
  UPDATE src/app/shared/navbar/_navbar-theme.scss (686 bytes)
  UPDATE src/app/shared/table-of-contents/_table-of-contents-theme.scss (666 bytes)
  UPDATE src/assets/stack-blitz/src/styles.scss (211 bytes)
  UPDATE src/assets/stack-blitz-tests/src/styles.scss (298 bytes)
  UPDATE src/styles/_api-theme.scss (1506 bytes)
  UPDATE src/styles/_markdown-theme.scss (1113 bytes)
  UPDATE src/styles/_svg-theme.scss (1775 bytes)
  UPDATE src/styles/_tables-theme.scss (661 bytes)
  UPDATE src/styles/custom-themes/deeppurple-amber.scss (345 bytes)
  UPDATE src/styles/custom-themes/indigo-pink.scss (339 bytes)
  UPDATE src/styles/custom-themes/pink-bluegrey.scss (362 bytes)
  UPDATE src/styles/custom-themes/purple-green.scss (378 bytes)
  Migration completed.

** Executing migrations of package '@angular/material' **

> Updates Angular Material to v13.

      ✓  Updated Angular Material to version 13

  Migration completed.

Done in 57.97s.

paul@paul-windows MINGW64 ~/projects/material.angular.io (12.x)
$ yarn start
yarn run v1.22.11
$ ng serve
✔ Browser application bundle generation complete.

As said, if anybody faces an issue where ng update did not run properly (while your app was not on v13 already), please create another issue and we'll do our best looking into it! Thanks!

[hheexx]

If anybody else reports the problem I will create the issue. Thanks!

[6ygga]

I had the same issue after migration from 12 to 13 ver:

Build at: 2021-11-07T06:12:19.257Z - Hash: 238020893e14045d - Time: 327ms

./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[
4].rules[0].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].rules[1].use[1]!./src/styles.scss - Error: Module build failed (
from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ @use '~@angular/material' as mat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\theme.scss 1:1 @import
src\styles.scss 1:9 root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
6 │ @use '@angular/material' as mat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\theme.scss 6:1 @import
src\styles.scss 2:9 root stylesheet
at tryRunOrWebpackError (D:\Projects\SP\node_modules\webpack\lib\HookWebpackError.js:88:9)
at webpack_require_module (D:\Projects\SP\node_modules\webpack\lib\Compilation.js:4963:12)
at webpack_require (D:\Projects\SP\node_modules\webpack\lib\Compilation.js:4920:18)
at D:\Projects\SP\node_modules\webpack\lib\Compilation.js:4991:20
at symbolIterator (D:\Projects\SP\node_modules\neo-async\async.js:3485:9)
at done (D:\Projects\SP\node_modules\neo-async\async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (D:\Projects\SP\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\Projects\SP\node_modules\tapable\lib\Hook.js:18:14)
at D:\Projects\SP\node_modules\webpack\lib\Compilation.js:4898:43
at symbolIterator (D:\Projects\SP\node_modules\neo-async\async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
6 │ @use '@angular/material' as mat;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\theme.scss 6:1 @import
src\styles.scss 2:9 root stylesheet
at Object. (D:\Projects\SP\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!D:\Projects\SP\node_modules@angular-devkit\build-angular\node_modules\postcss-loader\dist\cjs.js??ruleSet[1
].rules[4].rules[0].oneOf[1].use[2]!D:\Projects\SP\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[4].rules[1].use[0]!D:\Projects\SP\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[4].rules[1].use[1]!D:\Projects\SP
\src\styles.scss:1:7)
at D:\Projects\SP\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (D:\Projects\SP\node_modules\tapable\lib\HookCodeFactory.js:19:10), :7:1)
at Hook.CALL_DELEGATE [as _call] (D:\Projects\SP\node_modules\tapable\lib\Hook.js:14:14)
at D:\Projects\SP\node_modules\webpack\lib\Compilation.js:4965:39
at tryRunOrWebpackError (D:\Projects\SP\node_modules\webpack\lib\HookWebpackError.js:83:7)
at webpack_require_module (D:\Projects\SP\node_modules\webpack\lib\Compilation.js:4963:12)
at webpack_require (D:\Projects\SP\node_modules\webpack\lib\Compilation.js:4920:18)
at D:\Projects\SP\node_modules\webpack\lib\Compilation.js:4991:20
at symbolIterator (D:\Projects\SP\node_modules\neo-async\async.js:3485:9)

Generated code for D:\Projects\SP\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[4].rules[0].oneOf[1].use[1]!D:\Projects\SP\node_modules@angular-devkit\build-angular\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[
4].rules[0].oneOf[1].use[2]!D:\Projects\SP\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[4].rules[1].use[0]!D:\Projects\SP\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[4].rules[1].use[1]!D:\Projects\SP\src\sty
les.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n ╷\n6 │ @use '~@angular/material' as mat;\r\n │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n ╵\n src\as
sets\theme.scss 6:1 @import\n src\styles.scss 2:9 root stylesheet");

It was solved by deleting ' ~ '
@use '~@angular/material' as mat;
@use '@angular/material' as mat;

but my linter didn't like it)

[qliqdev]

Without tilda sign works but stylint error occuring.

Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.4
OS: darwin x64

Angular: 13.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.3 (cli-only)
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3 (cli-only)
@angular-devkit/schematics      13.0.3 (cli-only)
@angular/cli                    13.0.3
@angular/flex-layout            12.0.0-beta.35
@schematics/angular             13.0.3 (cli-only)
rxjs                            7.4.0
typescript                      4.4.4

[ecruz165]

I no longer saw this issue once i added the following to angular.json

"stylePreprocessorOptions": {
  "includePaths": [
    "node_modules",
    "src/assets/styles"
  ]

[davidecampello]

I no longer saw this issue once i added the following to angular.json

"stylePreprocessorOptions": {
  "includePaths": [
    "node_modules",
    "src/assets/styles"
  ]

This is working! Thank you

[richardsengers]

Ok, but I've got a large mono repo...should I include this:

"stylePreprocessorOptions": {
  "includePaths": [
    "node_modules",
  ]

to all my projects?I've got a material theme as a library included in all my projects. It doesn't feel it makes sense to remember I need to add the code above everytime I create a new project just because the ~has been deprecated

[ecruz165]

It will likely be added to the script for upgrade and/or new project script when adding @angular/material. So, there is a need for this to be added until then if you are looking to use angular/material 13.

…

________________________________ From: richardsengers ***@***.***> Sent: Tuesday, December 7, 2021 8:53 AM To: angular/components ***@***.***> Cc: Edwin Cruz ***@***.***>; Comment ***@***.***> Subject: Re: [angular/components] Can't find stylesheet to import: @use ***@***.***/material' as mat; (Issue #23889) Ok, but I've got a large mono repo...should I include this: "stylePreprocessorOptions": { "includePaths": [ "node_modules", ] to all my projects?I've got a material theme as a library included in all my projects. It doesn't feel it makes sense to remember I need to add the code above everytime I create a new project just because the ~has been deprecated — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#23889 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGN4D7UQPCSWGMKTEZ5PMWDUPYGWBANCNFSM5HK3TB7Q>. 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>.

[1ike]

Had this problem with monorepo + yarn workspaces. All deps from angular package hoisted to the project root, except @angular/material dep which was moved to angular package (didn't want to edit styles paths in angular.json and was afraid that @angular/material on the root repo level might cause incomprehensible problems in the future):

  "workspaces": {
     .....    
    "nohoist": [
      .....    
      "**/@angular/material",
      .....     
    ]
  },

Deleting this line ("**/@angular/material",) helped me with error "SassError: Can't find stylesheet to import.".
Or if you have only one angular package, you can move specific angular deps into angular package via "**/@angular*/**" instead of "**/@angular/material", but of course it is not the best workaround.

[angular-automatic-lock-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.}