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