Что делает `~` тильда в CSS `url()` do?

Например, @import url("~./foobar");

Видел это здесь, не уверен, что это какая-то конкретная вещь или если она действительно синтаксис CSS.

Ответ 1

Путь CSS @import <url> обычно относится к текущему рабочему каталогу.

Поэтому использование префикса ~ в начале пути сообщает загрузчику Webpack разрешить импорт "как модуль" из пути узла узла.

Это означает, что если у вас есть модуль узла, называемый normalize installed, и вам нужно импортировать файл, который принадлежит ему с именем normalize.css, вы можете сделать это с помощью:

@import "~normalize/normalize.css";

В вашем связанном примере внутри font-loader/example/test.js имеется импорт модуля под названием font-boon.

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

Внутри font-loader/example/test.css модуль font-boon @imported, так что он доступен в text.css.

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