По поводу самой директивы
@import в main.scss: сейчас рекомендуется использовать вместо неё
@use, общий смысл остаётся тем же. Подробнее можете прочитать
на официальном сайте.
Для подключения стилей библиотеки нужно прописать правильный путь до файла относительно того файла,
в который подключаете, main.scss в вашем случае. Где у вас лежит библиотека, в node_modules? Относительный путь выглядит, например, так:
../../node_modules/tippy.js/dist/tippy.css: это значит выйти на один уровень папок выше два раза (две точки), затем зайти в несколько папок вглубь и выбрать нужный файл. Я думаю, вас запутал путь до CSS файла, указанный в описании пакета npm, там путь указывается для импорта с помощью ES modules в js файл, чтобы потом собирать с помощью бандлеров типа Webpack. Вы хотите подключить CSS файл в SCSS, так что попробуйте прописать путь, как я описал.
Для подключения JS части библиотеки потребуется import в ваш main.js или index.js с помощью ES modules, как описано на странице пакета библиотеки. В идеале потом, чтобы бандлер обработал Js: собрать в один файл, Babel, минификация и другие операции с JS кодом. Можно, конечно, и с помощью Gulp сконкатенировать все JS файлы без бандлеров, но нужно следить за порядком конкатенации, есть и другие нюансы, и это в целом неудобно. Я использую связку Gulp для всего кроме JS, а Webpack — для JS, соединяются они через
webpack-stream.
Чтобы заработали ES modules, добавьте
"type": "module" в ваш package.json.
Удачи)
