@kopcapuk

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

Не получается подключить стили модулей.
Делаю как указано в доке 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 нужно настроить, чтобы пути к стилям правильно резолвились?
  • Вопрос задан
  • 86 просмотров
Решения вопроса 1
Dimox
@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.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы