reactjs - 无法在下一个 js 中运行 swiperjs。未找到模块：包路径 ./swiper.scss 未从包中导出

Question

在它以前工作之前，我使用了 next 和 swiper。但是现在当我尝试它时，我得到 Module not found: Package path ./swiper.scss is not export from package 。错误我在下面提到了我的代码。我尝试切换到以前版本的 swiper。即使我复制了确切的代码，它似乎也不起作用

_app.js

import '../styles/globals.css'

import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';


function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Hesosection.js

import React from 'react'
import Image from 'next/dist/client/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import Slider1 from '../public/assets/slider/sliderimage1.png'
import styles from '../styles/HeroSection.module.css';
import SwiperCore, { Navigation,Parallax,EffectFade ,Autoplay,Mousewheel, Pagination, Scrollbar, A11y } from 'swiper';
SwiperCore.use([Navigation ,Parallax,Autoplay, EffectFade,Mousewheel, Pagination, Scrollbar, A11y]);


function HeroSection() {
    return (
        <div className={styles.container}>
            <Swiper className={styles.slidercontainer}
                spaceBetween={0}
                effect="coverflow"
                slidesPerView={1}
                autoplay={{
                    "delay": 5000,
                    "disableOnInteraction": false
                }}
                loop={true}
                pagination={{
                    
                    clickable:true
                  }}
                        
                >
                    <SwiperSlide className="swiper-pagination-black">
                        <div>
                            <Image  src="/assets/slider/sliderimage1.png" alt="heroimage" height="1000" width="1000" /> 
                        </div>
                    </SwiperSlide>
                    <SwiperSlide className={styles.slider}>
                         <Image  src={Slider1} alt="heroimage" height="1000" width="1000" /> 
                    </SwiperSlide>
                    <SwiperSlide className={styles.slider}>
                        <Image  src="/assets/slider/sliderimage1.png" alt="heroimage" height="1000" width="1000" /> 
                    </SwiperSlide>
            </Swiper>
        </div>
    )
}

export default HeroSection

标签： reactjsnext.jsswiperjs

Answer 1

import 'swiper/scss'
import 'swiper/scss/navigation'
import 'swiper/scss/pagination'

我修复了你需要像这样导入