Как app.scss знает, что ~ foo - это каталог foo внутри node_modules?

Question

У меня есть проект Laravel с app.scss, расположенный в resources/assets/sass/frontend/.

node_modules находится в корневом каталоге.

Внутри app.scss У меня есть:

@import '../../../../node_modules/daterangepicker/daterangepicker.css';

однако я могу заменить это на:

@import '~daterangepicker/daterangepicker.css';

и все же файл может быть найден как моей IDE, так и npm, когда я запускаю npm run dev.

Очевидно, что второй подход намного чище, и я хочу придерживаться его, но где логика, которая знает, что тильда означает переход на 4 уровня вверх в структуре каталогов и ввод node_modules?

Answer 1

Это веб-пакет sass-загрузчик. Документация говорит:

Таким образом, вы можете импортировать ваши модули Sass из node_modules. Просто добавьте к ним ~, чтобы сообщить веб-пакету, что это не относительный импорт:

@import "~bootstrap/dist/css/bootstrap";

IDE обычно знает о таких функциях веб-пакета.

Если это не веб-пакет, возможно, вы используете другой тип компилятора, который, скорее всего, повторяет это поведение.