Next JS Build Swiper JS Issue with Tailwind CSS

如何解决Next JS Build Swiper JS Issue with Tailwind CSS

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

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

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

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

// 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,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

解决方法

我在使用 react-swiper 和 NextJS 时遇到了同样的问题。我认为这个问题是由捆绑时的一些树抖动引起的，不包括 swiper 组件 CSS 文件，因为它们没有导入到 swiper 模块中（非常“随机”猜测，因为我对 Webpack 树抖动的了解非常基础）。

但是，我通过将 swiper .less 文件导入我项目中的自定义 .less 文件（因此它们在构建时被捆绑和缩小）解决了这个问题，然后将最新的 .less 文件导入我的组件文件。>

遵循代码示例

/* custom-swiper.less */
@import "~swiper/swiper.less";
@import "~swiper/components/navigation/navigation.less";
@import "~swiper/components/pagination/pagination.less";

/*
 * my swiper style overrides below
 */
...