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

96

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

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

ahstro
fonte
3
@JackMiller Não, este não é um operador de seleção, é parte de um diretório de arquivo.
Sebastian Simon

Respostas:

139

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

ksav
fonte
7
então .. basicamente, é ~conter o node_modulecaminho?
Adrianriyadi