Was macht eine `~` Tilde in einer CSS `url ()`?

86

Z.B @import url("~./foobar");

Ich habe es hier gesehen und bin mir nicht sicher, ob es sich um eine paketspezifische Sache handelt oder ob es sich um eine tatsächliche CSS-Syntax handelt.

ahstro
quelle
3
@ JackMiller Nein, dies ist kein Auswahloperator, sondern Teil eines Dateiverzeichnisses.
user4642212

Antworten:

127

Der CSS-@import Pfad <url>ist normalerweise relativ zum aktuellen Arbeitsverzeichnis.

~Wenn Sie also das Präfix am Anfang des Pfads verwenden, wird der Webpack-Loader angewiesen, den Import "wie ein Modul" von einem Knotenmodulpfad aufzulösen.

Dies bedeutet, dass Sie Folgendes tun können , wenn Sie ein Knotenmodul mit dem Namen normalizeinstalliert haben und eine Datei mit dem Namen importieren /normalize.cssmüssen:

@import "~normalize/normalize.css";

In Ihrem verknüpften Beispiel wird font-loader/example/test.jsein Modul namens importiert font-boon.

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

Innerhalb des font-loader/example/test.cssFont-Boon-Moduls befindet sich @imported, damit es in verfügbar ist text.css.

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

ksav
quelle
7
Also .. ist im Grunde ~enthalten node_modulePfad?
Adrianriyadi