zoukankan      html  css  js  c++  java
  • 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;
      }
    
  • 相关阅读:
    非常不错的学习网站——技术胖
    Vue中使用mescroll.js实现下拉刷新
    2020.10.07【NOIP提高A组】模拟
    2020.10.06【NOIP提高A组】模拟 总结
    2020.09.19【NOIP提高A组】模拟
    2020.09.12【NOIP提高A组】模拟
    GMOJ 4417. 【HNOI2016模拟4.1】神奇的字符串 题解
    上下界网络流学习笔记
    GMOJ 3571. 【GDKOI2014】内存分配 题解
    [模板]人工栈
  • 原文地址:https://www.cnblogs.com/AFu-1993/p/12172082.html
Copyright © 2011-2022 走看看