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)
Without tilda sign works but stylint error occuring.
I no longer saw this issue once i added the following to angular.json
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 throughng 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:
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