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

Question

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

对于swiper@7.3.1，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 swiper@6.8.4

纱：

yarn add swiper@6.8.4

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

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

其他 CSS 用于克隆演示。

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

Answer 4

尝试这个

 import 'swiper/swiper.scss';