17

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

az rnd
  • 643
  • 3
  • 14
  • 28
  • 1
    Does this answer your question? [Tilde ~ in SCSS @use statement no longer resolving to node\_modules as of Angular 13](https://stackoverflow.com/questions/70082698/tilde-in-scss-use-statement-no-longer-resolving-to-node-modules-as-of-angular) – cloned Nov 29 '22 at 09:52
  • Could you solve the issue? – Esteban Chornet Feb 23 '23 at 09:45

3 Answers3

27

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

ibrahimgb
  • 693
  • 5
  • 13
5

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

OtaconKiko
  • 186
  • 10
ElenaLj
  • 95
  • 2
  • 7
4

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.

Serkan KONAKCI
  • 1,100
  • 11
  • 16