Vue:定义全局css样式

在项目中,会存在很多的相同css样式,如果在每一个存在的vue文件中都加上这个样式的话,到时候需要更改的时候就会很麻烦,所以就需要把这些相同的css样式写入一个css文件中,然后在全局引入这个css文件.解决重复定义,修改起来麻烦的问题

1.在src -> common -> css ->base.less

 

这些都是一些组件的css样式

//from表单查询
.el-form--inline{
  width: 98% ;
  margin: auto ;
}
//弹窗 el-dialog
.el-dialog__wrapper{
  display: flex ;
  align-items: center ;
}
//loding 弹窗的盒子
.el-dialog__body{
padding: 1px 29px ;
border-bottom: 1px solid #ccc ;
border-top:1px solid #ccc ;
}
.demo-ruleForm{
margin-top: 15px;
}

2.main.js中引入 全局的样式

import './common/css/base.less'

 完成