SassError: Can't find stylesheet to import. - Angular upgrade

Question

Recently I updated my angular application to version 14 and after the upgrade, I am getting the below error. The error is below

./src/assets/vendor/default/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
4 │ @import "~src/vendor/libs/ng2-nouislider/mixins";

Could anyone help to resolve this problem?

Thanks in advance

Indite

Does this answer your question? Tilde ~ in SCSS @use statement no longer resolving to node_modules as of Angular 13 – Simplicity

Could you solve the issue? – Adis

Answer 1

For Angular 15. remove tilde symbol (~) from the path.

Zeiger

Bless you kind stranger – Cetane

This actually works, thank you! I suggest anyone having this error message after upgrading Angular to use this, it works. – Collegiate

funciona eliminando ~ – Unaccompanied

Answer 2

There are two options for resolve it:

• use node_modules instead of ~ tilda symbol as shown @import node_modules/..../mixins
• Or add node_modules to angular.json file as below

"stylePreprocessorOptions": {
  "includePaths": [
    "src", "./node_modules"
  ]
}

I prefer to use the first one.

Tinworks

replacing ~ with node_modules worked for me! – Featheredge

I used the second in my case and it got fixed my problem. It is worth pointing out that I was mixing @angular/build_angular:browser-esbuild and @angular/build_angular:karma – Auberbach

Answer 3

I had the same problem with Angular 15 but the error only appeared in build and not locally.

~ (tilde) is no longer to be used since Angular 13 and is being deprecated.

I fixed the error replacing @import with @use in every file, as written here: sass at-rules import

Vernon

Answer 4

I have faced the same issue and couple of days I found below solution that works for me. add relative path @import '../../../node_modules/@angular/material/theming' ;

Watchful