O que faz um `~` til em um `url ()` CSS?

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

Vi aqui , não tenho certeza se é alguma coisa específica do pacote ou se é a sintaxe CSS real.

O caminho CSS@import<url> geralmente é relativo ao diretório de trabalho atual.

Portanto, o uso do prefixo ~no início do caminho informa ao carregador do Webpack para resolver a importação "como um módulo", começando do node_modulesdiretório.

Isso significa que se você tiver um módulo de nó chamado normalizeinstalado e precisar importar um arquivo de dentro dele chamado /normalize.css, você pode fazer isso com:

@import "~normalize/normalize.css";

Em seu exemplo vinculado, font-loader/example/test.jshá uma importação de um módulo chamado font-boon.

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

Dentro do font-loader/example/test.cssmódulo font-boon é @importado para que esteja disponível em text.css.

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