Next JS 使用 Tailwind CSS 构建 Swiper JS 问题答案

【问题标题】：Next JS Build Swiper JS Issue with Tailwind CSSNext JS 使用 Tailwind CSS 构建 Swiper JS 问题
【发布时间】：2021-08-16 04:03:02
【问题描述】：

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

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

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

要重现，只需使用 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, 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

【问题讨论】：

你是如何使用 swiper 样式的？您是在某处包含捆绑的 CSS 文件，还是使用他们的 SCSS/Less 样式？

标签： reactjs build next.js tailwind-css swiper

【解决方案1】：

我在使用带有 NextJS 的 react-swiper 时遇到了同样的问题。我认为这个问题是由捆绑时的一些树抖动引起的，它排除了 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
 */
...

【讨论】：

【解决方案2】：

我遇到了同样的问题，并通过在 head html 元素中导入 cdn 并使用 swiper/react 导入来修复它我正在使用 nextjs 和 typescript 和 tailwind 做出反应

在适当的地方——我把 _document.jsx 放进去

       <Head>
          <link
            rel="stylesheet"
            href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
          />          
        </Head>

<Swiper> and <SwiperSlide>的用法

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation } from 'swiper';

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

【讨论】：