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

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.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 23 (8 by maintainers)

Most upvoted comments

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


image image

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

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

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

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?

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), <anonymous>: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.<anonymous> (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), <anonymous>: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)

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