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

angelaki · 2021-11-04T08:33:39Z

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.

The text was updated successfully, but these errors were encountered:

crisbeto · 2021-11-04T09:44:32Z

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 · 2021-11-04T10:54:23Z

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 · 2021-11-04T11:25:26Z

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

devversion · 2021-11-04T11:32:05Z

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

angelaki · 2021-11-04T12:10:04Z

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 · 2021-11-04T13:18:22Z

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

devversion · 2021-11-04T13:44:31Z

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 · 2021-11-05T14:48:39Z

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 · 2021-11-05T15:06:54Z

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 · 2021-11-05T18:00:25Z

@devversion I have rerun the migration but it just nooped

devversion · 2021-11-05T18:03:44Z

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

hheexx · 2021-11-05T19:22:11Z

@devversion nope, latest patch od 12.x

devversion · 2021-11-05T19:28:45Z

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 · 2021-11-05T20:52:01Z

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 · 2021-11-05T21:59:11Z

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

6ygga · 2021-11-07T06:22:08Z

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 · 2021-11-20T10:28:51Z

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 · 2021-11-28T14:40:52Z

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

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

davidecampello · 2021-12-01T16:35:36Z

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 · 2021-12-07T13:53:25Z

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 · 2021-12-09T16:43:28Z

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 · 2021-12-16T15:53:38Z

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 · 2022-01-16T00:03:21Z

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.}

angelaki added the needs triage This issue needs to be triaged by the team label Nov 4, 2021

alexeyuzlov mentioned this issue Nov 4, 2021

bug(theming): Can't find stylesheet to import #23896

Closed

jelbourn added the needs: clarification The issue does not contain enough information for the team to determine if it is a real bug label Nov 4, 2021

vpetrusevici mentioned this issue Nov 5, 2021

Broken on Angular Material 13 johannesjo/angular-material-css-vars#85

Closed

devversion closed this as completed Nov 5, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

angelaki commented Nov 4, 2021

crisbeto commented Nov 4, 2021

angelaki commented Nov 4, 2021

crisbeto commented Nov 4, 2021

devversion commented Nov 4, 2021

angelaki commented Nov 4, 2021 via email

Heatmanofurioso commented Nov 4, 2021

devversion commented Nov 4, 2021

Kralone commented Nov 5, 2021

devversion commented Nov 5, 2021

hheexx commented Nov 5, 2021

devversion commented Nov 5, 2021

hheexx commented Nov 5, 2021 •

edited

Loading

devversion commented Nov 5, 2021 •

edited

Loading

devversion commented Nov 5, 2021

hheexx commented Nov 5, 2021

6ygga commented Nov 7, 2021

qliqdev commented Nov 20, 2021 •

edited

Loading

ecruz165 commented Nov 28, 2021 •

edited

Loading

davidecampello commented Dec 1, 2021

richardsengers commented Dec 7, 2021

ecruz165 commented Dec 9, 2021 via email

1ike commented Dec 16, 2021

angular-automatic-lock-bot bot commented Jan 16, 2022

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

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

Comments

angelaki commented Nov 4, 2021

crisbeto commented Nov 4, 2021

angelaki commented Nov 4, 2021

crisbeto commented Nov 4, 2021

devversion commented Nov 4, 2021

angelaki commented Nov 4, 2021 via email

Heatmanofurioso commented Nov 4, 2021

devversion commented Nov 4, 2021

Kralone commented Nov 5, 2021

devversion commented Nov 5, 2021

hheexx commented Nov 5, 2021

devversion commented Nov 5, 2021

hheexx commented Nov 5, 2021 • edited Loading

devversion commented Nov 5, 2021 • edited Loading

devversion commented Nov 5, 2021

hheexx commented Nov 5, 2021

6ygga commented Nov 7, 2021

qliqdev commented Nov 20, 2021 • edited Loading

ecruz165 commented Nov 28, 2021 • edited Loading

davidecampello commented Dec 1, 2021

richardsengers commented Dec 7, 2021

ecruz165 commented Dec 9, 2021 via email

1ike commented Dec 16, 2021

angular-automatic-lock-bot bot commented Jan 16, 2022

hheexx commented Nov 5, 2021 •

edited

Loading

devversion commented Nov 5, 2021 •

edited

Loading

qliqdev commented Nov 20, 2021 •

edited

Loading

ecruz165 commented Nov 28, 2021 •

edited

Loading