По поводу самой директивы @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.

Удачи)

Я нашёл виновника: обратите внимание на селектор .wrapper-middle, у него в нескольких местах задан z-index: 2, что создаёт новый stacking context. Из-за такого родителя ваше модальное окно с точки зрения z-index расположено не выше значения родителя, то есть 2. Подумайте в эту сторону. Возможно, стоит вынести модальное окно из обёрток и расположить на одном уровне с нижним баром, если это возможно в вашем случае. Всё равно модальному окну задан position: fixed, так что те обёртки не должны быть принципиальными для него.
Удачи, Андрей)