¿Qué hace una tilde `~` en un CSS `url ()`?

P.ej @import url("~./foobar");

Lo vi aquí , no estoy seguro de si es algo específico del paquete o si es una sintaxis CSS real.

La ruta CSS@import<url> suele ser relativa al directorio de trabajo actual.

Entonces, el uso del prefijo ~al comienzo de la ruta le dice al cargador de Webpack que resuelva la importación "como un módulo" desde una ruta de módulo de nodo.

Lo que eso significa es que si tiene un módulo de nodo llamado normalizeinstalado, y necesita importar un archivo desde dentro de él /normalize.css, puede hacerlo con:

@import "~normalize/normalize.css";

En su ejemplo vinculado, dentro font-loader/example/test.jshay una importación de un módulo llamado font-boon.

var boon = require('./font-boon');

Dentro del font-loader/example/test.cssmódulo font-boon se @importa para que esté disponible en formato text.css.

@import url("~./font-boon");