【问题标题】:unable to run swiperjs in next js. Module not found: Package path ./swiper.scss is not exported from package无法在下一个 js 中运行 swiperjs。未找到模块:包路径 ./swiper.scss 未从包中导出
【发布时间】:2021-09-23 14:14:57
【问题描述】:

在它使用之前,我使用了 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

【问题讨论】:

    标签: reactjs next.js swiperjs


    【解决方案1】:
    import 'swiper/scss'
    import 'swiper/scss/navigation'
    import 'swiper/scss/pagination'
    

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

    【讨论】:

      猜你喜欢
      • 2022-01-11
      • 2021-12-05
      • 2022-09-24
      • 2022-01-25
      • 1970-01-01
      • 2022-09-24
      • 2023-01-04
      • 2021-12-26
      • 2021-12-06
      相关资源
      最近更新 更多