Tilde ~ in SCSS @use statement no longer resolving to node_modules as of Angular 13

Question

After upgrading an Angular 12 project to Angular 13 I encountered an issue where SCSS was no longer to locate a shared style sheet in a library. It appears that that Tilde (~) no longer resolves to node_modules.

Broken: @use '~my-angular-lib' as lib;

Works: @use '../node_modules/my-angular-lib' as lib;

I noticed that angular material just directly refences '@angular/material' as of Angular 13 but I can't figure out how to get that to work with my library. It seems kind of hacky to use a relative path to node_modules every time.

What is the current best method of refencing a style sheet in node_modules, or what am I missing to where ~ no longer points to node_modules?

Answer 1

I encountered the same problem and found the solution:

1. Open angular.json file;

2. In every app configuration set:

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

3. remove ~ in every import;

Answer 2

Angular has been deprecating the use of ~ for Sass @use and @import statements for a while.

Officially, as of Angular version 13 the usage of tilde imports won't be supported anymore.

Here about the why this is working without tilde