Next JS 使用 Tailwind CSS 构建 Swiper JS 问题
Posted
技术标签:
【中文标题】Next JS 使用 Tailwind CSS 构建 Swiper JS 问题【英文标题】：Next JS Build Swiper JS Issue with Tailwind CSS 【发布时间】：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 样式的？您是在某处包含捆绑的 CSS 文件，还是使用他们的 SCSS/Less 样式？ 【参考方案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]);
【讨论】：
以上是关于Next JS 使用 Tailwind CSS 构建 Swiper JS 问题的主要内容，如果未能解决你的问题，请参考以下文章
Next JS 使用 Tailwind CSS 构建 Swiper JS 问题
如何使用 Next.js 将 PNG 徽标添加到 Tailwind CSS 导航栏？
如果在 className 中使用变量，则 React/Next.js 中的 Tailwind 不会为 text-*xl 类生成 css
Tailwind CSS 不适用于 Next JS 12，但适用于 Next JS 11