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

Posted 2023-02-22

【中文标题】找不到模块：无法解析“swiper/css/components/navigation/navigation.scss”Nextjs

【英文标题】：Module not found: Can't resolve 'swiper/css/components/navigation/navigation.scss' Nextjs

【发布时间】：2021-04-07 06:57:38

【问题描述】：

我是 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;

这里

【参考方案1】：

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