Fügen Sie der .svelte-Komponente .js / .css-Dateien hinzu

Question

Ich möchte Swiper Sliper hinzufügen, meine Frage ist:

1. Es ist möglich, CSS in das Skript-Tag einzufügen, wie folgt:

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

Weil der Import in den Kopf schwierig ist ( CSS in node_modules in svelte importieren )

1. Ich füge swiper.jsDatei zu svelte hinzu, und es funktioniert fast. Es funktioniert bei Berührung (Maus), Tasten jedoch nicht ( .swiper-button-next .swiper-button-prev). Gibt es spezielle Regeln für den Import von .js-Dateien?

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

Answer 1

1. Mit Rollup können Sie die CSS-Datei einfach wie für ein .jsModul importieren :

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

1. Für das Navigationsproblem steht es in der Swiper-Dokumentation :

Standardmäßig exportiert Swiper nur die Kernversion ohne zusätzliche Module (wie Navigation, Paginierung usw.). Sie müssen sie also auch importieren und konfigurieren:

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

Schließlich kann Ihre Komponenteninitialisierung folgendermaßen durchgeführt werden:

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

Hier ist der Link für die Codesandbox .