Сам столкнулся с этим. Решение оказалось следующим.
Сначала нужно импортировать стили прямо из
node_modules. В вашем случае будет так:
import navigationCSS from '/node_modules/swiper/modules/navigation-element.css?url'
import scrollbarCSS from '/node_modules/swiper/modules/scrollbar-element.css?url'
Затем указать их в параметрах:
Object.assign(swiperMain, {
modules: [Navigation, Scrollbar, Thumbs],
injectStylesUrls: [
navigationCSS,
scrollbarCSS
]
})
Обратите внимание на следующее:
- В конце каждого импорта добавлено ?url. Это обязательно при использовании Vite, чтобы стили корректно импортировались.
- В папке /node_modules/swiper/modules/ есть минимизированные версии файлов (например, для navigation-element.css это navigation-element.min.css). Не важно, какой из них подключать, так как при сборке они итак минимизируются.
- Думаю, очевидно, что, поскольку используем swiper-element, то из папки /node_modules/swiper/modules/ нужно импортировать файлы с суффиксом -element.
