Que fait un tilde "~" dans un "url()`` CSS ?

Question

Par exemple @import url("~./foobar");

Je l'ai vu. aquí Je ne sais pas s'il s'agit d'une spécificité du paquet ou d'une syntaxe CSS réelle.

Answer 1

El CSS @import chemin <url> est généralement relative au répertoire de travail actuel.

Donc, en utilisant le préfixe ~ au début du chemin indique au chargeur Webpack de résoudre l'importation "comme un module", en commençant par l'élément node_modules répertoire.

Ce que cela signifie, c'est que si vous avez un module de nœud appelé normalize installé, et vous devez importer un fichier à partir de celui-ci nommé /normalize.css vous pouvez le faire avec :

@import "~normalize/normalize.css";

---

Dans votre exemple, à l'intérieur de font-loader/example/test.js il y a une importation d'un module appelé font-boon .

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

A l'intérieur de font-loader/example/test.css le module font-boon est @importé afin qu'il soit disponible en text.css .

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

Answer 2

MISE À JOUR mars 2021

De sass-loader Les importations de tilde '~' sont dépréciées et il est recommandé de les supprimer.

Answer 3

L'utilisation d'une déclaration @import suppose que vous importez à partir de l'arborescence du site Web de l'UE. modules de nœuds dossier. Ainsi, par exemple, si vous essayez d'importer bootstrap.css, vous utiliserez

@import "~bootstrap/dist/css/bootstrap.css"

C'est-à-dire que vous mettez le chemin relatif au dossier node_modules.