Dodaj pliki .js / .css do komponentu .svelte

Question

Chcę dodać suwak do smukłego, moje pytanie brzmi:

1. Możliwe jest dodanie css w tagu skryptu, na przykład:

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

Ponieważ import do głowy jest trudny ( importuj css w node_modules do smukłego )

1. Dodaję swiper.jsplik do smukłego i prawie działa. Działa na dotyk (mysz), ale przyciski nie ( .swiper-button-next .swiper-button-prev). Czy istnieją specjalne reguły dotyczące importu plików .js?

Przykład kodu: https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

Answer 1

1. Dzięki pakietowi możesz po prostu zaimportować plik css, tak jak zrobisz to dla .jsmodułu:

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

1. W przypadku problemu z nawigacją jest to napisane w dokumentacji swipera :

Domyślnie Swiper eksportuje tylko wersję podstawową bez dodatkowych modułów (takich jak nawigacja, paginacja itp.). Więc musisz je również zaimportować i skonfigurować:

// 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(...);

Na koniec inicjalizację komponentu można wykonać w następujący sposób:

<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>

Oto link do skrzynki z kodami .