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


91

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.


3
@JackMiller No, este no es un operador de selección, es parte de un directorio de archivos.
user4642212

Respuestas:


132

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");


7
entonces ... básicamente, ¿ ~contiene node_moduleruta?
adrianriyadi

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.