Like in the movie “Secret Life of Walter Mitty“, there are things out there we are not aware of. At least, I was not aware, which also don’t mean a lot.
We all know the following statement, which we find in CSS of every new web part.
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
TLDR
The ~ aka tilde is a shortcut to the node_modules folder, but I haven’t found any clear documentation but it works.
The odd thing about tilde
While we might know things like ‘~sitecollection’ and a couple of other occasions where the tilde gets used in SharePoint, it becomes odd for the link like that on the file system.
The tilde sign is a shortcut for the home drive under Linux, BSD, macOS, and other POSIX operating systems.
So why would I load for a web part something from my home drive? I don’t know.
For a proper filesystem path, there is a slash missing. The following statement illustrates what this would look.
@import '~/@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
With ‘~@microsoft’, someone could also assume it is a shortcut just for Microsoft. Even C# use ‘~/’ and not the tilde directly.
On the contrary, whenever you import something from the node_modules folder (“Advertisement Warning”) like hTWOo.
You can simply write the following instead of:
@import 'node_modules/@n8d/htwoo-core/lib/components/base';
You can just write:
@import '~@n8d/htwoo-core/lib/components/base';
The unfortunate side effect of not having this documented is that millions of solutions in the wild might reference the ‘node_modules’ folder directly.
I had an issue in SharePoint Framework 1.14 of the SharePoint Framework where a reference to node_modules seemed broken.
Over it should be known what it stands for. Do I like the tilde? Yes and No – I rarely see the use of this character in meaning like this. It is something Microsoft special, so if someone has a good example where a tiled gets used. Please comment below.
The old official documentaion on how to integrate Office UI Fabric integration