SwiperJS 样式不适用于 NextJS

Posted 2023-05-08

【中文标题】SwiperJS 样式不适用于 NextJS

【英文标题】：SwiperJS styling does not work with NextJS

【发布时间】：2021-11-12 10:24:12

【问题描述】：

我已将SwiperJS 安装到我的NextJS 项目中。我完全按照 Swiper 教程文档进行操作，但是当我尝试为 .swiper、.swiper-slide 之类的类设置样式时出现问题……样式没有响应我的自定义样式。

在我的例子中，我的滑块是一个组件，并且有一个名为 Slider 的文件夹，其中包含 index.tsx 文件和 slider.module.scss。

我的 index.tsx：

import Image from 'next/image';
import  Swiper, SwiperSlide  from 'swiper/react';
import  Navigation, Pagination, Scrollbar  from 'swiper';

import styles from './slider.module.scss'

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export function SliderPortfolio() 
  return (
    <div className=styles.teste>
      <Swiper
        className=styles.mySwiper
        modules=[Navigation, Pagination, Scrollbar]
        spaceBetween=50
        slidesPerView=3
        navigation
        pagination= clickable: true 
        scrollbar= draggable: true 
      >
        <SwiperSlide>
          <div className=styles.imageContainerNext>
            <Image
              className=styles.imageNext
              src='/images/dribble-mockup.png'
              
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className=styles.imageContainerNext>
            <Image
              className=styles.imageNext
              src='/images/dribble-mockup.png'
              
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className=styles.imageContainerNext>
            <Image
              className=styles.imageNext
              src='/images/dribble-mockup.png'
              
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className=styles.imageContainerNext>
            <Image
              className=styles.imageNext
              src='/images/dribble-mockup.png'
              
              layout="fill"
            />
          </div>
        </SwiperSlide>
      </Swiper>

    </div>

  )

我的slider.module.scss：

.teste 
  background:  blue; //works

  .mySwiper 
    background: red; //works

    .swiper 
      background: yellow; // doesn't work
    

    .swiper-slide 
      display: none; // doesn't work
    

  

我错过了什么？

【参考方案1】：

解决了。我在我的主要样式global.scss 中插入了 swiper 样式类并开始工作。谢谢各位！

【讨论】：

那么如果你想进行动态样式更改怎么办？我也在寻找一种方法来做到这一点

【参考方案2】：

假设 css 类名是正确的，改变你的导入顺序

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import styles from './slider.module.scss'

【讨论】：

没用 :(

您的 webpack 配置可能正在更改生成的类名，您可以将其添加到您的问题中（如果它的 Nextjs 默认不需要它）？或者尝试将名称从 .module.scss 更改为 .scss（并导入为 import './slider.scss')，但这取决于您的配置