vue文件引入全局样式致使样式重复

一般项目中src下的子目录都会有一个style文件夹，专门用来存放全局的样式文件。
这个style文件夹下，通常有reset.css、var.scss、mixin.scss、class.scss、index.scss
通常都会在index.scss文件中引入其余文件作统一管理，并在main.js中引入index.scss

咱们在开发vue文件时，一般会用到全局样式文件，尤为是mixin.scss。
常常在vue文件中会出现，直接引入index.scss的状况

<style lang="scss" scoped>
    @import "~@/styles/index.scss";
    .wrap{
        @include clearfix;
    }
</style>

虽然能够达到指望的效果。可是这样引入会带来一个反作用。

假若有两个vue文件都是这样引入的，你在审查元素的时候会发现，同一个class样式声明了两次。
好比A.vue和B.vue都引入了index.scss并都用到了class="red"，index.scss引入的class.scss中定义了一个样式 .red{color:red}。
那么，当你审查该元素的时候会发现，这个.red在页面上被定义了两次。
像.red{color:red}这样的内容会被单独打包进于该vue文件中（若是使用了css-extract-plugin，一样打包进与该vue对应的css文件中)。
因此组件加载完，样式也会被添加到页面中。

若是每一个页面都直接引入了index.scss。无形中会给浏览器形成很大的负担(由于样式树的生成、样式树与文档树结合的效率很低）。

那如何避免呢？
正确的姿式是:
只引入 @import "~@/styles/mixin.scss"、@import "~@/styles/var.scss"
他们只会将 vue文件中 @include clearfix 直接替换为

&:after {
    content: "";
    display: table;
    clear: both;
  }