Adicionar arquivos .js / .css ao componente .svelte

Question

Quero adicionar o controle deslizante para esbelto, minha pergunta é:

1. É possível adicionar css na tag de script, assim:

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

Porque a importação para o cabeçote é complicada ( importe css em node_modules para svelte )

1. Eu adiciono swiper.jsarquivo para esbelto e quase funciona. Funciona com o toque (mouse), mas os botões não ( .swiper-button-next .swiper-button-prev). Existem regras especiais de importação de arquivos .js?

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

Answer 1

1. Com o rollup, você pode apenas importar o arquivo css como faria para um .jsmódulo:

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

1. Para o problema de navegação está escrito na documentação do swiper :

Por padrão, o Swiper exporta apenas a versão principal sem módulos adicionais (como Navegação, Paginação, etc.). Portanto, você também precisa importá-los e configurá-los:

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

Então, finalmente, a inicialização do seu componente pode ser feita assim:

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

Aqui está o link para a caixa de códigos .