Question

我是 Nextjs 新手我在我的组件中使用了 swiper，但出现错误，分页导航和 swiper CSS 未找到，当我在 Nextjs 中使用此代码时，此代码在 Reactjs 中工作正常我收到错误如何在 Nextjs 中导入这个 CSS

enter 
import React, { useState } from "react";
import LandingItem from "../landing-item/landing-items-component";
import styles from "./landing-items-preview-styles.module.scss";

import SwiperCore, { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/components/navigation/navigation.scss";
import "swiper/css/components/pagination/pagination.scss";
import "swiper/css/swiper.css";

function LandingItemsPreview({ otherProps: { id, items, name } }) {

  return (
    <div className={`${styles.landing_items_preview}`}>
      <div className={`${styles.header}`}>
        <h1 className={`${styles.title}`}>{`Top ${name}`}</h1>
        <button className={`${styles.view_all}`}>View All</button>
      </div>
      <div className={`${styles.swiper_main_container}`}>
        <span
          disabled={isBeginning}
          className={`${styles.custom_swiper_button} ${styles.skewed}`}
          onClick={goback}
        >
          &#10140;
        </span>
        <Swiper>
          {items.map(({ id, ...otherProps }) => (
            <SwiperSlide key={id} className={`${styles.TopRestaurant_slides}`}>
              <LandingItem {...otherProps} />
            </SwiperSlide>
          ))}
        </Swiper>
        <span
          disabled={isEnd}
          className={`${styles.custom_swiper_button}`}
          onClick={goNext}
        >
          &#10140;
        </span>
      </div>
    </div>
  );
}

export default LandingItemsPreview;

这里

Answer 1

尝试导入“navigation.min.css”而不是“navigation.scss”

找不到模块：无法解析'swiper/css/components/navigation/navigation.scss' Nextjs

1 个答案: