Vue+VueRouter+Webpack+Axios+ElementUI---构建项目实战(四)引入SASS进行样式处理

 引入SASS进行样式处理

执行以下命令安装sass编写样式

yarn add sass
yarn add node-sass
yarn add sass-loader

src目录:

_reset.scss代码如下 

//浏览器初始化文件
//基础样式文件
/**
 * @author: 谁是春风
 * @date: 2019/5/30
 * @version: V1.0
 * @Description: 重置浏览器样式
*/

$main-font: "'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif ";
//浏览器重置样式
html, body, div, span, nav, header, iframe, h1, h2, h3, h4, h5, h6, p, section, footer, a, form, address, big, cite, code, del, dfn, em, img, ins, fieldset, q, s, samp, small, strike, strong, sub, sup, label, var, b, u, i, input, dl, dt, dd, ol, ul, li, figure,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-family:$main-font;
}
html,body {
  font{
    size: 16px;
  }
  font-family:$main-font;
}

form,
fieldset {
  border: 0 none;
}

ol li,ul li {
  list-style: none;
}

select {
  appearance: none;
}

img {
  border: 0 none;
  max-width: 100%;
}

input,
select {
  outline: none;
  font-family: $main-font;
}

input[type=checkbox] {
  display: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
  line-height: 38px;
}
button {
  outline: none;
  border: 0;
  font-family: $main-font;
  cursor: pointer;
}

:focus {
  outline: 0;
}

button:focus {
  outline: none;
}

button:hover {
  outline: none;
}

i,
em {
  font-style: normal;
}

a {
  color: #535353;
  text-decoration: none;
}

.clearfix:before, .clearfix:after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '.';
}
.clearfix {
  zoom: 1;
}

 

index.scss代码如下:

@import './base/reset';
html,body {
    width: 100%;
    height: 100%;
}
#app{
    width: 100%;
    height: 100%;
    &>div{
        width: 100%;
        height: 100%;
    }
    .wx-header{
        height: 40px;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background-color: #f7f7f7;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 99;
        &>span{
            display: inline-block;
            font-size: 14px;
            margin-left: 18px;
        }
        &>div{
            margin-right: 18px;
            &>span{
                font-size: 16px;
                &:nth-of-type(1){
                    margin-right: 20px;
                }
            }
        }
    }
    .wx-footer{
        height: 60px;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: #f7f7f7;
        z-index: 99;
        &>ul{
            height: 100%;
            display: flex;
            &>li{
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
                &>a{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    .icon{
                        width: 26px;
                        height: 26px;
                    }
                    &>span{
                        font-size: 12px;
                    }
                    &.active{
                        &>.icon{
                            fill:#08bf62;
                        }
                        &>span{
                            color: #08bf62;
                        }
                    }
                }
            }
        }
    }
    .wx-content{
        position: relative;
        top: 40px;
        width: 100%;
        min-height: calc(100% - 100px);
        background-color: #fff;
        overflow: auto;
    }
}

在App.vue中添加

最终App.vue的代码如下:

就可以随时编写我们想要的样式代码了，由于下一章涉及内容较多，在本章我就把该写的样式都写在scss样式处理这章中。