using swiper in react js app that created by vite

Question

i'am trying to use swiper js in my react js project that created with vite but it throws and error with this title : Failed to resolve import "swiper/css" from "src\components\dashboard-components\Projects.jsx". Does the file exist? but when i use it in a project that created with create-react-app it works. what is the problem?

    // Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';

export default () => {
  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>
  );
};