Question

未找到模块：无法解析“swiper/css”

2021-09-12

88198

reactjs swiper.js react-swiper

Swiper 7.0.5 swiper/css 给出错误“未找到模块：无法解析‘swiper/css’”

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
function Test() {
 return (
  <Swiper
  spaceBetween={50}
  slidesPerView={3}
  onSlideChange={() => console.log('slide change')}
  onSwiper={(swiper) => console.log(swiper)}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  ...
</Swiper>
);
}

 export default Test;

Answer 1

对于 [email protected] ，Create-React-App 项目中的导入工作方式如下 -

import React from 'react'
import { Pagination } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react'



import 'swiper/swiper.min.css'
import 'swiper/modules/pagination/pagination.min.css'

Answer 2

经过一整天的寻找，我终于解决了这个问题。完全删除 swiper 并添加版本 6.8.4： npm:

npm install [email protected]

yarn:

yarn add [email protected]

然后将此布局添加到您的文件中，它应该可以工作：

import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'

<Swiper
      spaceBetween={50}
      slidesPerView={3}
      centeredSlides
      onSlideChange={() => console.log("slide change")}
      onSwiper={swiper => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>

版本 6.8.4 文档位于此处

Answer 3

“swiper”：“^8.0.2”版本，我是如何解决的

import 'swiper/swiper.min.css';

用于克隆演示的其他 csss。

import 'swiper/modules/free-mode/free-mode.min.css';
import 'swiper/modules/navigation/navigation.scss';
import 'swiper/modules/thumbs/thumbs.min.css';

如果不允许单独导入 css 文件，请尝试将它们添加到顶级根路径，例如 index.jsx。

import 'swiper/swiper-bundle.css';