Swiper 7.0.5引入swiper/css报错Module not found: Can't resolve 'swiper/css'如何解决？

Swiper v7.0.5版本暂不支持swiper/css简化样式导入语法，该导入规则是Swiper v7.1.0之后版本才新增的特性，低版本需使用完整的样式文件路径才能正确引入。

你可以根据项目需求选择任意一种方案处理：

• 方案一：无需升级版本，仅修改样式导入路径
  将原有代码中的import 'swiper/css'替换为import 'swiper/swiper.min.css'即可。如果后续使用了分页器、导航按钮等附加模块，对应样式也需要使用旧路径引入，例如导航按钮样式导入语句为import 'swiper/modules/navigation/navigation.min.css'。

修改后的完整代码如下：

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';
function Test() {
 return (
  <Swiper
  spaceBetween={50}
  slidesPerView={3}
  onSlideChange={() => console.log('slide change')}
  onSwiper={(swiper) => console.log(swiper)}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
  ...
</Swiper>
);
}

export default Test;

• 方案二：升级Swiper到7.1.0及以上版本
  执行对应包管理器的升级命令即可，升级后原有import 'swiper/css'语句可正常使用：

# npm
npm install swiper@7.6.5
# yarn
yarn add swiper@7.6.5

内容的提问来源于stack exchange，提问作者Ibad