Cosa fa una tilde `~` in un CSS ʻurl () `?

Per esempio @import url("~./foobar");

L'ho visto qui , non sono sicuro se sia qualcosa di specifico del pacchetto o se sia la sintassi CSS effettiva.

Il percorso CSS@import<url> è solitamente relativo alla directory di lavoro corrente.

Quindi l'utilizzo del prefisso ~all'inizio del percorso indica al caricatore Webpack di risolvere l'importazione "come un modulo" da un percorso del modulo del nodo.

Ciò significa che se hai un modulo nodo chiamato normalizeinstallato e devi importare un file da esso denominato /normalize.css, puoi farlo con:

@import "~normalize/normalize.css";

Nel tuo esempio collegato, all'interno font-loader/example/test.jsc'è un'importazione di un modulo chiamato font-boon.

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

All'interno del font-loader/example/test.cssmodulo font-boon è @imported in modo che sia disponibile in text.css.

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