Tambahkan file .js / .css ke komponen .svelte

Question

Saya ingin menambahkan slider swiper ke svelte, pertanyaan saya adalah:

1. Mungkin untuk menambahkan css dalam tag skrip, seperti ini:

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

Karena impor ke kepala rumit ( Impor css di node_modules ke svelte )

1. Saya menambahkan swiper.jsfile ke svelte, dan itu hampir berhasil. Ini berfungsi pada sentuhan (mouse), tetapi tombol tidak ( .swiper-button-next .swiper-button-prev). Apakah ada aturan file impor .js khusus?

Contoh kode: https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

Answer 1

1. Dengan rollup Anda dapat mengimpor file css seperti yang akan Anda lakukan untuk .jsmodul:

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

1. Untuk masalah navigasi tertulis di dokumentasi swiper :

Secara default Swiper hanya mengekspor versi inti tanpa modul tambahan (seperti Navigasi, Penomoran Halaman, dll.). Jadi, Anda perlu mengimpor dan mengonfigurasinya juga:

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

Jadi akhirnya, inisialisasi komponen Anda bisa dilakukan seperti itu:

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

Ini tautan untuk kode dan kotak .