时间戳

首页 > 解决方案 > 将 .js/.css 文件添加到 .svelte 组件

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

问题描述

我想将 swiper 滑块添加到苗条，我的问题是：

  1. 可以在脚本标签中添加 css，如下所示：
<script> import from "styles.css" ... </script>

因为导入到 head 很棘手（在 node_modules 中导入 css 到 svelte）

  1. 我将swiper.js文件添加到 svelte，它几乎可以工作。它适用于触摸（鼠标），但按钮不起作用（.swiper-button-next .swiper-button-prev）。是否存在特殊的导入 .js 文件规则？

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

标签： svelteswiper

解决方案

  1. 使用汇总，您可以像导入.js模块一样导入 css 文件：
<script>
  import { onMount } from "svelte";
  import "swiper/swiper-bundle.min.css"; // <- just import your css
  ...
</script>
  1. 对于导航问题，它写在swiper 文档中：

默认情况下，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>

这是codeandbox的链接。

推荐阅读