Vue-awesome-swiper css翻译报错

Question

使用swiper直接从官网占的代码，但是总是报错，将css注释掉之后就不报错
报错信息如下

代码如下主文件代码

请输入代码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":"#app",
    "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>

Answer 1

把引用改成这个试试
import { swiper, swiperSlide } from 'vue-awesome-swiper';

Answer 2

把import 'swiper/dist/css/swiper.css';语句放在<style></style>标签里面试试。在</script>后面新建一个<style></style>

Answer 3

看错误 应该是没有css-loader 你是不是没有npm intsall