页面的tabbar并没有看到有样式的渲染

tabbar的代码

<template>

<div class="g-tabbar">

<router-link class="g-tabbar-item" to="/home">

<i class="iconfont icon-honme"></i>

<span>首页</span>

</router-link>

<router-link class="g-tabbar-item" to="/category">

<i class="iconfont icon-category"></i>

<span>分类页</span>

</router-link>

<router-link class="g-tabbar-item" to="/cart">

<i class="iconfont icon-cart"></i>

<span>购物车</span>

</router-link>

<router-link class="g-tabbar-item" to="/personal">

<i class="iconfont icon-personal"></i>

<span>个人中心</span>

</router-link>

</div>

</template>

<script>

export default{

name:'CTabbar'

};

</script>

<style scoped>

@import "~assets/scss/mixins";

  .router-link-active {

    color: $link-active-color;

  }

</style>

app.vue的代码

<template>

  <div id="app" class="g-container">

     <div class="g-view-container">

      <router-view></router-view>

     </div>

      <div class="g-footer-container">

      <c-tabbar/>

      </div>

  </div>

</template>

<script>

   import CTabbar from 'components/tabbar'

    export default {

        name: 'App',

        components:{

        CTabbar

        }

    }

</script>

index。scss

@charset "UTF-8";

@import "reset";

@import "base";

@import "icons";

@import "containers";

@import "tabbar";