4

When using a tilde (~) in scss import paths, it expands to node_modules/ in Angular. Is there any piece of official documentation that says that this is a feature of either Angular or webpack?

All I have found on the matter so far is a few bug reports for previous angular versions saying it's broken, and a comment saying it's an implementation detail that shouldn't be relied upon.

I was hoping to do an ng eject and check the configs, but that command is no longer available.

I'd appreciate if someone could point me to either some official piece of documentation stating that ~ is shorthand for the path to node_modules/, or a piece of source code (e.g. a config file) that specifies that replacement. :)

Basically, I want to figure out why this works, and how.

Christian
  • 6,070
  • 11
  • 53
  • 103

1 Answers1

4

It's a feature of WebPack. Tilde resolving is handled by the sass-loader plugin for Webpack. I believe the benefits of this feature is to import resources such as fonts, images, etc.. into your CSS files directly from your WebPack bundles. Therefore, it has to support the same syntax for resolving WebPack paths.

It is implemented in the importsToResolve.js file.

https://github.com/webpack-contrib/sass-loader/blob/aa9b53b4d1c14117c4ca114a13cecb6e53b4e87a/src/importsToResolve.js#L12

It's a great feature, but introduces problems when you want to share SASS files between WebPack and non-Webpack projects, because node-sass does not support this feature.

Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • 1
    Thank you! The functionality is also explicitly mentioned in [the docs, section Resolving import at-rules](https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules). Bliss! :) – Christian Sep 11 '19 at 07:59