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;
}
原文地址:https://www.cnblogs.com/AFu-1993/p/12172082.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法