Aggiungi file .js / .css al componente .svelte

Question

Voglio aggiungere il cursore di scorrimento a svelte, la mia domanda è:

1. È possibile aggiungere CSS nel tag script, in questo modo:

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

Perché l'importazione in testa è complicata ( importa css in node_modules per svelte )

1. Aggiungo swiper.jsfile a svelte e quasi funziona. Funziona al tocco (mouse), ma i pulsanti no ( .swiper-button-next .swiper-button-prev). Esistono regole speciali per l'importazione dei file .js?

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

Answer 1

1. Con il rollup puoi semplicemente importare il file css come faresti per un .jsmodulo:

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

1. Per il problema di navigazione è scritto nella documentazione di swiper :

Per impostazione predefinita, Swiper esporta solo la versione principale senza moduli aggiuntivi (come Navigazione, Impaginazione, ecc.). Quindi devi importarli e configurarli anche:

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

Quindi, finalmente, l'inizializzazione del tuo componente può essere eseguita in questo modo:

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

Ecco il link per il codeandbox .