Импорты в CSS и препроцессорах отличаются.

В препроцессорах файлы «склеиваются» в один файл, а в CSS нет. Поэтому в случае с препроцессорами пользователь сайта скачает один итоговый склеенный style.css, а c CSS пользователь скачает каждый импортируемый файл, который добавили с помощью @ import.
Например, если вы добавили 15-20 файлов, что реально для среднестатистического проекта, то для каждого этого файла будет открыто HTTP-соединение. Это накладные ресурсы, которые откладывают загрузку последующих ресурсов.
Также проблема заключается в том, что каждый стилевой файл будет загружаться последовательно. Это значит, что второй файл даже не начнёт загружаться, пока не загрузится первый. Если файлов 15-20, то цепочка становится длинной, а ведь мы даже не дошли до картинок и скриптов в контенте сайта.
По последней спецификации к @ import стало возможно добавлять @ supports-директиву.
@ import url("narrow.css") supports(display: grid);
Но это правило не говорит «Загрузи narrow.css, если браузер понимает гриды», оно говорит «Загрузи narrow.css и, если браузер поддерживает гриды, примени стили внутри стилевого файла к сайту». То есть проблемы с загрузкой никуда не ушли.
Поэтому использовать @ import в современной разработке не принято. Используйте препроцессоры или системы сборки, которые будут объединять стилевые файлы.