Vue:定义全局css样式

小小怪_下士

于 2023-07-25 15:40:01 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js css 前端

本文链接：https://blog.csdn.net/qq_45061461/article/details/131919333

为了解决Vue项目中相同CSS样式的重复定义问题，可以将它们集中写入一个如`base.less`的文件中。这样，在需要修改时，只需要改动一处即可。例如，文章提到了对`el-form--inline`,`el-dialog__wrapper`,`el-dialog__body`等组件样式的设置，并在`main.js`中引入`base.less`以实现全局应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中,会存在很多的相同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中引入全局的样式