在vue3使用swiper7中，无法引入所有的css样式，less也不行

这是官网给的例子

<template>
  <swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

这是ts，可以看见引入了swiper/swiper.min.css以及其他用的的模块样式

<script lang="ts">
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/swiper.min.css';
// import 'swiper/modules/navigation/navigation.min.css';
// import 'swiper/modules/pagination/pagination.min.css';
// import 'swiper/modules/scrollbar/scrollbar.min.css';

/**
 * 如果嫌麻烦可以把上面的全部样式都删了，直接用总的
 * bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）
 */
// import "swiper/swiper-bundle.min.css";

import { defineComponent } from 'vue';

export default defineComponent({
  name: '',
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper: any) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change');
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y],
    };
  },
});
</script>

但是运行时，报如下错误

并且在我的node_modules包里是有这些东西的

import 'swiper/css';

不会就找度娘，度娘表示你这乱七八糟的看不懂，直接换一个吧
https://blog.csdn.net/qq_45164496/article/details/102231240

import { Swiper, SwiperSlide } from 'swiper/vue';
这一句改成
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';

如有帮助，望采纳 ^.^