@use in sass - Unable to resolve path of css from node_modules

Question

I have installed modern-normalize in my project, and from a sass file I'm trying to include it's css file like so:

@use '~modern-normalize/modern-normalize' as *;

I keep getting this however:

Error: Can't find stylesheet to import. ╷ 9 │ @use '~modern-normalize/modern-normalize' as *; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Even though in my IDE (vscode) I can CMD+Click on this and it navigates and opens the file just fine, I see in my node_modules dir

Am I missing something config related perhaps?

Answer 1

Your path looks odd, the tilde ~ prefix start of the path tells used to css-loader to resolve the import "like a module", starting from the node_modules directory.

However Angular has deprecated the use of ~ for Sass @use and @import statements.

Tilde imports have been deprecated in the Sass loader for a long time and they won't work with the new package format in v13. These changes add a migration that will drop the tilde.

See https://github.com/angular/components/commit/f2ff9e31425f0e395e6926bcaf48f876688000d8

So try removing it. e.g.

@use 'modern-normalize/modern-normalize' as *;

Answer 2

Angular has removed tilde support for sass loader. Do this in angular.json for your application to add relative path to node modules

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

Then remove ~ from your import paths.

Alternatively, you can use absolute path for import such as below, construct path to node_modules, you might need to check correct path for your file.

use '../../node_modules/modern-normalize/modern-normalize' as *;