Как подключить стили модулей в swiper-element?

Question

[Макс]

Не получается подключить стили модулей.
Делаю как указано в доке https://swiperjs.com/element#core-version--modules

import { register } from 'swiper/element'
import { Navigation, Scrollbar, Thumbs } from 'swiper/modules'

register()

const swiperMain = document.getElementById('swiper-main')

Object.assign(swiperMain, {
    modules: [Navigation, Scrollbar, Thumbs],
    injectStylesUrls: [
        'swiper/element/css/navigation',
        'swiper/element/css/scrollbar'
    ]
})

swiperMain.initialize()

В консоле получаю ошибки:

http://site/product/swiper/element/css/navigation net::ERR_ABORTED 404 (Not Found)
http://site/product/swiper/element/css/scrollbar net::ERR_ABORTED 404 (Not Found)

Пробовал просто импортнуть:

import 'swiper/element/css/navigation'
import 'swiper/element/css/scrollbar'

Но стили не применяются, так как, скорее всего, нужно их применять к shadow dom.
Может в Vite нужно настроить, чтобы пути к стилям правильно резолвились?

Comments

[Макс]

Вот так инжектятся https://skr.sh/sQ0L6mB7SXF

Answer 1

[Dimox]

Сам столкнулся с этим. Решение оказалось следующим.

Сначала нужно импортировать стили прямо из 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
    ]
})

Обратите внимание на следующее:

1. В конце каждого импорта добавлено ?url. Это обязательно при использовании Vite, чтобы стили корректно импортировались.
   
2. В папке /node_modules/swiper/modules/ есть минимизированные версии файлов (например, для navigation-element.css это navigation-element.min.css). Не важно, какой из них подключать, так как при сборке они итак минимизируются.
   
3. Думаю, очевидно, что, поскольку используем swiper-element, то из папки /node_modules/swiper/modules/ нужно импортировать файлы с суффиксом -element.
   

Comments

[Макс]

Спасибо большое, работает)
Но всё равно, как-то костыльновато выглядит)

[Dimox]

Пожалуйста.

А попробуйте вообще удалить injectStylesUrls. Похоже, что соответствующие стили автоматически подключаются, когда в параметрах указаны модули:

modules: [Navigation, Scrollbar, Thumbs],

Хотя, как оказалось, это работает не для всех модулей. Например, для модуля EffectCreative подключать стили не потребовалось. Логика непонятна.

[Макс]

Dimox, не работает для всех модулей, автоматом не подключаются стили :"(