Agregue archivos .js / .css al componente .svelte

Question

Quiero agregar deslizador deslizante para esbelto, mi pregunta es:

1. Es posible agregar css en la etiqueta del script, así:

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

Porque la importación a la cabeza es complicada ( Importar css en node_modules para svelte )

1. Agrego swiper.jsarchivo a svelte, y casi funciona. Funciona al tacto (mouse), pero los botones no ( .swiper-button-next .swiper-button-prev). ¿Existen reglas especiales de importación de archivos .js?

Ejemplo de código: https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

Answer 1

1. Con el rollup, puede importar el archivo css como lo haría con un .jsmódulo:

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

1. Para el problema de navegación, está escrito en la documentación de swiper :

Por defecto, Swiper exporta solo la versión principal sin módulos adicionales (como Navegación, Paginación, etc.). Por lo tanto, también debe importarlos y configurarlos:

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

Entonces, finalmente, la inicialización de su componente se puede hacer así:

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

Aquí está el enlace para el codeandbox .