将.js / .css文件添加到.svelte组件

如何解决将.js / .css文件添加到.svelte组件

我想添加滑动滑块以使之倾斜，我的问题是：

1. 可以在脚本标记中添加CSS，如下所示：

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

因为导入到头很棘手（Import css in node_modules to svelte）

1. 我添加了swiper.js文件以使其苗条，并且几乎可以正常工作。它可以在触摸（鼠标）上工作，但是按钮不起作用（.swiper-button-next .swiper-button-prev）。是否存在特殊的导入.js文件规则？

代码示例：https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

解决方法

1. 通过汇总，您可以像导入.js模块一样导入css文件：

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

1. 对于导航问题，它写在swiper documentation中：

默认情况下，Swiper仅导出核心版本，而没有其他模块（例如导航，分页等）。因此，您也需要导入和配置它们：

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

所以最后，您的组件初始化可以这样完成：

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

这是codesandbox的链接。