Angular upgrade own library from 12 to 13 scss Error 'SassError: Can't find stylesheet to import.'

Question

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?

Bothersome

You mention @use but you use @import? Try changing to @use – Xenolith

Should I use @use where I import the theme of my component lib? – Bothersome

@MathewBerg I tried that, but the same error occured @use '@my/form-lib/theme as form-lib; ' – Bothersome

@use '@my/form-lib/theme maybe? – Xenolith

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? – Vasiliu

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 – Bothersome

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. – Poignant

Answer 1

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';

Poignant

Same worked for me, but why did it work this way? – Geber

I think it's related to the setting publicPath: "auto" in the webpack.config.js, but I'm not 100% sure about it – Poignant

Why this answer doesn't get more visibility?? I lost 1 hour...each time I don't use Angular for a while I forget that I need to do paths like so... – Drumbeat