SwiperJS 样式不适用于 NextJS

Question

我已经将 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'}
              alt="Illustration of a person carrying ideas for a professional website design"
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className={styles.imageContainerNext}>
            <Image
              className={styles.imageNext}
              src={'/images/dribble-mockup.png'}
              alt="Illustration of a person carrying ideas for a professional website design"
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className={styles.imageContainerNext}>
            <Image
              className={styles.imageNext}
              src={'/images/dribble-mockup.png'}
              alt="Illustration of a person carrying ideas for a professional website design"
              layout="fill"
            />
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className={styles.imageContainerNext}>
            <Image
              className={styles.imageNext}
              src={'/images/dribble-mockup.png'}
              alt="Illustration of a person carrying ideas for a professional website design"
              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
    }

  }
}

我错过了什么？

Answer 1

假设 css class 名称正确，请更改导入顺序

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

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

Answer 2

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

SwiperJS 样式不适用于 NextJS

SwiperJS styling does not work with NextJS

swiper

reactjs

next.js

swiper.js