nesting - webpack css example

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

Question

Por ejemplo, @import url("~./foobar");

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

Answer 1

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

Entonces, usar el 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 normalize instalado, y necesita importar un archivo llamado / /normalize.css , puede hacerlo con:

@import "~normalize/normalize.css";

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

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

Dentro de font-loader/example/test.css el módulo font-boon se importa @ para que esté disponible en text.css .

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