.svelte 구성 요소에 .js / .css 파일 추가

Question

svelte에 Swiper 슬라이더를 추가하고 싶습니다. 제 질문은 다음과 같습니다.

1. 다음과 같이 스크립트 태그에 CSS를 추가 할 수 있습니다.

<script> import from "styles.css" ... </script> 

머리로 가져 오기 가 까다롭기 때문에 ( node_modules의 css를 svelte로 가져 오기 )

1. swiper.jssvelte 에 파일을 추가 하면 거의 작동합니다. 터치 (마우스)에서는 작동하지만 버튼 ( .swiper-button-next .swiper-button-prev) 은 작동하지 않습니다 . 특별한 가져 오기 .js 파일 규칙이 있습니까?

코드 예 : https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

Answer 1

1. 롤업을 사용하면 .js모듈에 대해 수행하는 것처럼 css 파일을 가져올 수 있습니다 .

<script>
  import { onMount } from "svelte";
  import "swiper/swiper-bundle.min.css"; // <- just import your css
  ...
</script>

1. 탐색 문제의 경우 swiper 문서에 작성되었습니다 .

기본적으로 Swiper는 추가 모듈 (예 : 탐색, 페이지 매김 등)없이 핵심 버전 만 내 보냅니다. 따라서 가져 와서 구성해야합니다.

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

마지막으로 구성 요소 초기화는 다음과 같이 수행 할 수 있습니다.

<script>
  import { onMount } from "svelte";
  import "swiper/swiper-bundle.min.css";
  import Swiper, { Navigation } from "swiper";

  Swiper.use([Navigation]);

  onMount(() => {
    const swiper = new Swiper(".swiper-container", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  });
</script>

다음은 codesandbox에 대한 링크입니다 .