通常项目中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;
}
