What does a `~` tilde in a CSS `url()` do?
The CSS @import
path <url>
is usually relative to the current working directory.
So using the prefix ~
at the start of the path tells Webpack's css-loader to resolve the import "like a module", starting from the node_modules
directory.
What that means is that if you have a node module called normalize
installed, and you need to import a css file from within it named /normalize.css
, you can do that with:
@import "~normalize/normalize.css";
In your linked example, inside font-loader/example/test.js
there is an import of a module called font-boon
.
var boon = require('./font-boon');
Inside of font-loader/example/test.css
the font-boon module is @imported so that it is available in text.css
.
@import url("~./font-boon");
UPDATE March 2021
From sass-loader tilde '~' imports are deprecated and is recommended to be removed.