11

I'm trying to upgrade my Angular projects from 12 to 13 and running into an issue that I cannot fix since two days of work.

My applications are default Angular Material apps with some functionality like a grocery list app.

To insert items I use a formula with some fields which can be submitted. (MatDialog) I have outsourced this formula into my own angular library to be a little bit more generic and reusable.

Now, after upgrading the library project and trying to link the resulting build (from new Ivy) into my app I'm getting the error:

SassError: Can't find stylesheet to import.

@import '@my/form-lib/theme';

The stylesheet which is meant to be unknown comes from the library and provides the default theming access to this library but I cannot determine why this should happen. I also recognized, that the use of Angular Material now doesn't need the tilde ~ anymore.

@use '**~**@angular/material' as mat;

I have tried to remove all tilde ~ but the error still exists.

I also have tried to reset @angluar/cli to 13.0.0 which is described as a solution here.
But this doesn't work for me.

Does anyone know a solution to try out?

Jose Lora
  • 1,392
  • 4
  • 12
  • 18
Fabsi
  • 151
  • 1
  • 4
  • You mention `@use` but you use `@import`? Try changing to `@use` – Mathew Berg Jan 11 '22 at 15:38
  • Should I use @use where I import the theme of my component lib? – Fabsi Jan 11 '22 at 15:39
  • @MathewBerg I tried that, but the same error occured `@use '@my/form-lib/theme as form-lib; '` – Fabsi Jan 11 '22 at 15:44
  • `@use '@my/form-lib/theme` maybe? – Mathew Berg Jan 11 '22 at 15:49
  • Where does `@my/form-lib/theme` come from, is it in your project? What happens if you include the path to `@my` in `angular.json` -> `stylePreprocessorOptions.includePaths`? – stealththeninja Jan 12 '22 at 01:14
  • Both ideas didn't work .. may be a configuration error in the app project where I linked the library? Because the library's demo project is working fine – Fabsi Jan 12 '22 at 10:45
  • I have the same issue, the demo site in the lib I'm using works perfectly. Also my project works fine, if I don't use `ng serve`. If I build and then serve it externally, it's fine. – gigaDIE Feb 17 '22 at 15:43

1 Answers1

9

the only thing that fixed it for me it's been changing from

@import '@my/lib/scss-file';

to

@import 'node_modules/@my/lib/scss-file';
gigaDIE
  • 388
  • 4
  • 10