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

css webpack webpack-style-loader
ahstro picture ahstro · Sep 16, 2016 · Viewed 31.3k times · Source

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

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

Answer

ksav picture ksav · Sep 16, 2016

The CSS @import path <url> is usually relative to the current working directory.

So using the prefix ~ at the start of the path tells the Webpack 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 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");

Related questions

Webpack "OTS parsing error" loading fonts

My webpack config specifies that fonts should be loaded using url-loader, and when I try to view the page using Chrome I get the following error: OTS parsing error: invalid version tag Failed to decode downloaded font: [My local URL] …

Read More
“You may need an appropriate loader to handle this file type” with Webpack and CSS

I an new to webpack, and I have been able to get it to packup my javascript, but the CSS eludes me. I keep getting a: “You may need an appropriate loader to handle this file type” One the first …

Read More
How can I load image(s) used in sass stylesheet in webpack?

I am using Webpack to bundle my modules and using sass for styling purpose in a react based application. Using a seperate style-sheet I am setting the background-image of a component and loaded that style-sheet in index.js. All the …

Read More