Thêm tệp .js / .css vào thành phần .svelte

Question

Tôi muốn thêm thanh trượt xoay vào svelte, câu hỏi của tôi là:

1. Có thể thêm css trong thẻ script, như thế này:

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

Bởi vì nhập vào đầu là phức tạp ( Nhập css trong node_modules thành svelte )

1. Tôi thêm swiper.jstệp vào svelte, và nó gần như hoạt động. Nó hoạt động trên cảm ứng (chuột), nhưng các nút thì không ( .swiper-button-next .swiper-button-prev). Có tồn tại các quy tắc nhập tệp .js đặc biệt không?

Ví dụ về mã: https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

Answer 1

1. Với cuộn lên, bạn chỉ có thể nhập tệp css giống như bạn sẽ làm cho một .jsmô-đun:

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

1. Đối với vấn đề điều hướng, nó được viết trong tài liệu swiper :

Theo mặc định, Swiper chỉ xuất phiên bản lõi mà không có mô-đun bổ sung (như Điều hướng, Phân trang, v.v.). Vì vậy, bạn cũng cần phải nhập và định cấu hình chúng:

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

Vì vậy, cuối cùng, khởi tạo thành phần của bạn có thể được thực hiện như vậy:

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

Đây là liên kết cho hộp mã .