Vue-awesome-swiper css translation error

use swiper to take the code directly from the official website, but always report an error. Do not report an error after commenting out the css.
the error message is as follows

Code such as the following main file code

import Vue from "vue";
import App from "./container/App.vue";
import Vuex from "vuex";
import VueRouter from "vue-router";
import store from "./store.js";
import routes from "./routes.js";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
Vue.use(VueAwesomeSwiper);
Vue.use(Vuex);
Vue.use(VueRouter);
const router = new VueRouter({routes})
new Vue({
    "el":"-sharpapp",
    "data":{},
    //
    "components":{
        App
},
    render(h){
    return h(App)
    },
   store : new Vuex.Store(store),
   router
})

package.json

{
  "name": "wangyiyun",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --port 8080 --content-base ./"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.17",
    "vue-awesome-swiper": "^3.1.3",
    "vue-loader": "^15.2.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "css-loader": "^1.0.0",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.2.6",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.16.4"
  }
}
``<template>
<div>
    <Swiper></Swiper>
</div>
</template>
<script>
import Swiper from "./swipper.vue";
export default{
     components:{
        Swiper
    }
}
</script>

< template >
< swiper: options= "swiperOption" ref= "mySwiper" >

<!-- slides -->
<swiper-slide>I"m Slide 1</swiper-slide>
<swiper-slide>I"m Slide 2</swiper-slide>
<swiper-slide>I"m Slide 3</swiper-slide>
<swiper-slide>I"m Slide 4</swiper-slide>
<swiper-slide>I"m Slide 5</swiper-slide>
<swiper-slide>I"m Slide 6</swiper-slide>
<swiper-slide>I"m Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination"  slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>

< / swiper >
< / template >
< script >
export default {

name: "carrousel",
data() {
  return {
    swiperOption: {
      // some swiper options/callbacks
      //  swiper  api 
      // ...
      pagination: {
        el: ".swiper-pagination"
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    }
  }
},
computed: {
  swiper() {
    return this.$refs.mySwiper.swiper
  }
}

}
< / script >