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;
  }