如何解决找不到模块:无法解析'swiper/css/components/navigation/navigation.scss' Nextjs
我是 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}
>
➜
</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}
>
➜
</span>
</div>
</div>
);
}
export default LandingItemsPreview;
这里
解决方法
尝试导入“navigation.min.css”而不是“navigation.scss”
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。