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

[michaelfaith]

Reproduction

After updating to v13 this morning, which removed all of the tildes from mat @use statements, our library isn't building (via ng-packagr), saying it can't find the stylesheet. If I add the tildes back, it builds fine. Using without the tilde is working ok in the context of an application, but our library builds seem to still need them. This causes a really ugly catch 22, since our styles can't have tildes to work with applications, but need them to work with the library build.

Actual Behavior

------------------------------------------------------------------------------
Building entry point '@fabric/components/breadcrumbs'
------------------------------------------------------------------------------
× Compiling with Angular sources in Ivy partial compilation mode.
Can't find stylesheet to import.
  ╷
7 │ @use '@angular/material' as mat;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  breadcrumbs\breadcrumbs.component.scss 7:1  root stylesheet
error Command failed with exit code 1.

Environment

• Angular: 13.0.0
• CDK/Material: 13.0.0
• Browser(s): N/A
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[guehmann]

I have a similar problem, get the error message with and without tildes. After updating to V13 this morning.

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. ╷ 2 │ @use '~@angular/material' as mat; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src\styles.scss 2:1 root stylesheet at tryRunOrWebpackError (c:\Temp\rbvgroup\node_modules\webpack\lib\HookWebpackError.js:88:9) at __webpack_require_module__ (c:\Temp\rbvgroup\node_modules\webpack\lib\Compilation.js:4963:12) at __webpack_require__ (c:\Temp\rbvgroup\node_modules\webpack\lib\Compilation.js:4920:18) at c:\Temp\rbvgroup\node_modules\webpack\lib\Compilation.js:4991:20 at symbolIterator (c:\Temp\rbvgroup\node_modules\neo-async\async.js:3485:9) at done (c:\Temp\rbvgroup\node_modules\neo-async\async.js:3527:9) at Hook.eval [as callAsync] (eval at create (c:\Temp\rbvgroup\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (c:\Temp\rbvgroup\node_modules\tapable\lib\Hook.js:18:14) at c:\Temp\rbvgroup\node_modules\webpack\lib\Compilation.js:4898:43 at symbolIterator (c:\Temp\rbvgroup\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. ╷ 2 │ @use '~@angular/material' as mat; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

[belugasanity]

I also get the error with and without the tilde

[Heatmanofurioso]

I had that issue before doing a clean on my node_modules and deleting my package.json "fresh install". Doing that solved it for me

[michaelfaith]

It shouldn't be working with tildes, so that error is correct. My issue is that it's not working without tildes for ng-packagr builds, which creates an impossible situation, with lib builds needing the tilde and app build not working with them.

[michaelfaith]

Looks like this is being addressed on the ng-packagr side: https://github.com/ng-packagr/ng-packagr/issues/2142

[devversion]

thx @michaelfaith for linking that here 👍

[guehmann]

Sorry, can't understand why the both issues are closed, but for me it helped this:

`rmdir /q /s node_modules

del package.json.lock

npm cache clear --fore`

and then in the package.json

"dependencies": { "@angular/animations": "13.0.0", "@angular/cdk": "13.0.0", "@angular/common": "13.0.0", "@angular/compiler": "13.0.0", "@angular/core": "13.0.0", "@angular/flex-layout": "^12.0.0-beta.35", "@angular/forms": "13.0.0", "@angular/material": "13.0.0", "@angular/material-moment-adapter": "13.0.0",

only the 13.0.0

[michaelfaith]

@guehmann is your project a library or an app?

[guehmann]

I have a pure app, an an combined monorepo with nx. after clearing node_modules, package.json.lock and cache it is working with pure 13.0.0

[michaelfaith]

@guehmann yeah, I didn't have any problems with an app project. This issue is related to building libraries (ng-packagr)

[guehmann]

@michaelfaith Ok, for as long with my configuration it is working. Sorry. perhaps next update solve some of our problems.

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