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