reactjs - Next JS 使用 Tailwind CSS 构建 Swiper JS 问题

Question

我用 NextJS、Tailwind CSS 和 Swiper JS 设置了一个项目。

当我运行 Yarn Dev 时，我可以成功显示我的 Swiper Slider，没有任何错误

但是，一旦我构建了项目并运行“开始”，我就会遇到一个损坏的 slider ，没有导航，但我仍然可以滑动，但我得到了一个空白

要重现，只需使用 Tailwind 配置和 Swiper slider 设置 NextJS 项目。使用此示例代码在页面文件夹中创建一个文件

// import Swiper core and required modules
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import Layout from '@modules/Layout'

import { Swiper, SwiperSlide } from 'swiper/react'

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y])

const Slider = () => {
  return (
      <div className='container'>
        <Swiper
          spaceBetween={50}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log('slide change')}
        >
          <SwiperSlide>
            <div className='h-96 w-50 bg-red'>Slide 1</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-blue'>Slide 2</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-orange'>Slide 3</div>
          </SwiperSlide>
          <SwiperSlide>
            <div className='h-96 w-50 bg-green'>Slide 4</div>
          </SwiperSlide>
        </Swiper>
      </div>
  )
}

export default Slider

• Swiper 版本:6.5.6。
• 平台/目标和浏览器版本:CHROME

Answer 1

我对 OP 遇到了完全相同的问题，并且能够使用 OP 提供的代码重现该问题，不仅在产品构建中，而且由于某种原因在开发环境中也是如此。最后我通过以下方式解决了这个问题:

// Didn't use these imports
// import 'swiper/css'; // core Swiper
// import 'swiper/css/navigation'; // Navigation module
// import 'swiper/css/pagination'; // Pagination module

// Used this bundled instead - it seems to have included navigation, pagination, etc.
import 'swiper/swiper-bundle.min.css'

我的环境:

"next": "13.1.6",
"tailwindcss": "^3.2.4",
"swiper": "^9.0.1",