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;
  }
posted @ 2020-01-09 16:19  菜鸡_chicken  阅读(3650)  评论(1编辑  收藏  举报