เพิ่มไฟล์. js / .css ไปยังคอมโพเนนต์. svelte

Question

ฉันต้องการเพิ่ม swiper slider ไปที่ svelte คำถามของฉันคือ:

1. เป็นไปได้ที่จะเพิ่ม css ในแท็กสคริปต์เช่นนี้:

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

เนื่องจากการนำเข้าสู่ส่วนหัวเป็นเรื่องยุ่งยาก ( Import css ใน node_modules ไปยัง svelte )

1. ฉันเพิ่มswiper.jsไฟล์ลงใน svelte และเกือบจะใช้งานได้ ใช้งานได้บนการสัมผัส (เมาส์) แต่ปุ่มไม่ ( .swiper-button-next .swiper-button-prev) มีกฎการนำเข้าไฟล์. js พิเศษหรือไม่

ตัวอย่างโค้ด: https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

Answer 1

1. ด้วยการรวบรวมคุณสามารถนำเข้าไฟล์ css ได้เช่นเดียวกับที่คุณทำกับ.jsโมดูล:

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

นี่คือลิงค์สำหรับรหัสแซนด์บ็อกซ์