老师 快来看看 为啥没写样式 也能显示出效果 太奇怪了!

<template>
  <div class="g-tabbar">
    <router-link class="g-tabbar-item" to="/home">
      <i class="iconfont icon-home"></i>
      <span>首页</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/home">
      <i class="iconfont icon-category"></i>
      <span>分类</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/home">
      <i class="iconfont icon-cart"></i>
      <span>购物车</span>
    </router-link>
    <router-link class="g-tabbar-item" to="/home">
      <i class="iconfont icon-personal"></i>
      <span>我的</span>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'CTabbar'
  };
</script>

<style lang="scss" scoped>
// @import "~assets/scss/mixins";

  // .g-tabbar {
  //   display: flex;
  //   width: 100%;
  //   height: $tabbar-height;
  //   background-color: #fff;

  //   g-item {
  //     flex: 1;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     flex-direction: row;
  //   }
  // }
</style>

styles里的内容都注释或者删除  一样能有效果  这是为什么 ... 搞不明白 

而老师的却要 写 

// .g-tabbar {
  //   display: flex;
  //   width: 100%;
  //   height: $tabbar-height;
  //   background-color: #fff;

  //   g-item {
  //     flex: 1;
  //     display: flex;
  //     justify-content: center;
  //     align-items: center;
  //     flex-direction: row;
  //   }
  // }

这些代码才能实现 而我的不用写 也显示display flex属性   这我就奇怪的  哪里冒出来的