Ajouter des fichiers .js / .css au composant .svelte

Question

Je veux ajouter un curseur de balayage à svelte, ma question est:

1. Il est possible d'ajouter css dans la balise de script, comme ceci:

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

Parce que l'importation en tête est délicate ( importer css dans node_modules vers svelte )

1. J'ajoute un swiper.jsfichier à svelte, et cela fonctionne presque. Cela fonctionne au toucher (souris), mais pas aux boutons ( .swiper-button-next .swiper-button-prev). Existe-t-il des règles spéciales d'importation de fichiers .js?

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

Answer 1

1. Avec le rollup, vous pouvez simplement importer le fichier css comme vous le ferez pour un .jsmodule:

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

1. Pour le problème de navigation, il est écrit dans la documentation du swiper :

Par défaut, Swiper exporte uniquement la version principale sans modules supplémentaires (comme la navigation, la pagination, etc.). Vous devez donc également les importer et les configurer:

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

Donc finalement, l'initialisation de votre composant peut se faire comme ça:

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

Voici le lien pour les codesandbox .