找不到模块：无法解析 '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 并添加版本 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>

Answer 2

在最新版本的 Swiper 中，不再有 css 文件夹。所以...简单地说：swiper/css 不再存在。

但是 scss 文件可用，因此您可以简单地以这种方式调整您的导入导入 'swiper/swiper.scss';

当然，当你使用 React 时，你还需要 node-sass 库

Answer 3

试试这个

 import 'swiper/swiper.scss';

Answer 4

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

Answer 5

我遇到了同样的问题。结果，我被迫降到 6.8.4。首先，卸载最新版本的 swiper js。

npm uninstall swiper

然后安装

npm install swiper@6.8.4

然后替换

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

Answer 6

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

进口'swiper/swiper.scss'；这样可以帮助你

Answer 8

答案：$import "swiper/swiper.min.css"；

试试这个。如果你必须导入任何 css 用于分页、效果覆盖流等，然后像这样导入..

import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/effect-coverflow/effect-coverflow.min.css";

"nodemodules/swiper/modules " 包含所有样式。

如果没有解决...那么只需进入 nodemodules 并打开 swiper 文件，然后搜索需要为您的项目导入的 css files，然后 import他们在代码中

Answer 9

默认情况下，Swiper 仅导出核心版本，没有附加模块（如导航、分页等）。所以你也需要导入和配置它们：

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

如果你想导入带有所有模块（包）的 Swiper，那么它应该从 swiper/bundle:

导入

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

Checkout the swipper docs

Answer 10

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

如果您正在使用 version ^8.1.4。因为它在包中的导入方向错误，文档可能还没有更新。
你可以这样使用。

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

Answer 12

我如何解决滑动 css 模块未找到版本问题：^8.2.1 如果您将 package.json 滑动到 node_modules，您会看到

  "exports": {
    "./css": "./swiper.min.css",
    "./css/bundle": "./swiper-bundle.min.css",
   }

您必须通过调用

导入 css 文件或 css 包

进口'swipe/css'；导入 'swipe/css/bundle';

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

Module not found: Can't resolve 'swiper/css'

reactjs

swiper.js

react-swiper