csswebpackwebpack-style-loader

What does a `~` tilde in a CSS `url()` do?

E.g. @import url("~./foobar");

Saw it here, not sure if it's some package specific thing or if it's actual CSS syntax.

Solution

  • 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");