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

Question

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

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

Lo vio aquí, no estoy seguro si es algo específico de un paquete o si es sintaxis CSS real.

43

css css3 webpack webpack-style-loader

Author: ahstro, 2016-09-16

Source

1 answers

score 62 · Accepted Answer

CSS @import es relativo al directorio de trabajo actual.

Así que usando el prefijo ~ al inicio de la ruta le dice al cargador Webpack que resuelva la importación "como un módulo".

Lo que eso significa es que si tienes disponible un módulo llamado normalize, y necesitas importar un archivo que le pertenezca llamado normalize.css, puedes 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 es @importado para que esté disponible en texto.css.

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