Vue-CLI3.0项目搭建过程系列五：项目中样式管理（css reset等）

关于公共样式

assets下新建css文件夹用来存放样式文件，在它下面新建common.scss文件用来放css reset(样式重置)，根据项目需要可做调整

* {
padding: 0;
margin: 0;
box-sizing:border-box;//方便设计稿取值使用
}
html,body {
position:relative;
width:100%;
height:100%;
font-size: 14px;
font-family: PingFangSC-Regular;
scroll-behavior:smooth;
}
#app {
width:100%;
height:100%;
}
ul {
list-style-type: none;
}
li {
display: block;
list-style: none;
}
a {
text-decoration: none;
color: black;
cursor:pointer;
}
input {
outline: none;
border: none;
background-color: #fff;
}
.overflow {
overflow: hidden;
}
.clear {
clear: both;
height: 1px;
width: 100%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.fl {
float: left;
}
.fr {
float: right;
}
.alignLeft {
text-align: left;
}
.alignCenter {
text-align: center;
}
.alignRight {
text-align: right;
}
.inline {
display: inline-block;
}
.cursor {
cursor: pointer;
}
.blod {
font-weight: bold;
}
//上下左右居中
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*超出省略号--需要设置宽度*/
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 滚动条样式 */
::-webkit-scrollbar
{
width: 0.1rem;
height: 0.1rem;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: #dedfe0;
border-radius:0.1rem;
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #dedfe0;
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#dedfe0;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}

接下来就是要把它引进项目里，为了项目整体考虑，我们如果用了elementUI之类的前端框架就要面对一个问题：设计稿与框架界面间肯定存在差距需要我们对框架里元素样式做修改，建议统一放在一个样式文件里（css下新建element.scss）。这样可能在项目一开始我们就要引入多个scss文件，可以在assets->css下新建index.scss文件

@import "./common";
@import "./element";

接下来只需要在main.js里引入css-》index.scss文件就好（用这种方法减少了写在main.js中的引入文件数量）

import './assets/css/index.scss'

由此引入的样式文件可在全局起作用

具体每个页面的样式可以写在每个页面.vue文件里，加上scoped表明样式只在当前页面起作用

<style scoped lang="scss">
</style>

最后

以上就是成就宝贝最近收集整理的关于Vue-CLI3.0项目搭建过程系列五：项目中样式管理（css reset等）的全部内容，更多相关Vue-CLI3.0项目搭建过程系列五：项目中样式管理（css内容请搜索靠谱客的其他文章。