在vue中使用CSS的预处理器
2018-11-21 本文已影响16人
晨曦诗雨
安装
Scass
在命令中输入
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
cnpm install sass-resources-loader --save-dev
在vue中使用
image.png
Less
在命令中输入
cnpm install less --save
cnpm install less-loader --save
在vue中的使用
<style rel="stylesheet" type="text/css" lang="less" scoped>
.showImg{
width: 100%;
height: 300px;
background: #0b1321 url("../assets/main/022.jpg")no-repeat top center;
}
.about {
color: @header-color;
font-size: 16px;
text-indent: 2em;
line-height: 30px;
padding-left: 10px;
padding-right: 10px;
}
</style>
Stylus
在命令中输入
cnpm install stylus
cnpm install stylus --save-dev
cnpm install stylus-loader --save-dev
在vue中的使用
<style lang="stylus" scoped>
.header
line-height :.86rem
background: #25a4bb
color:#ffffff
display :flex
.header-left
float :left
width:.64rem
.header-right
float : right
width:1.24rem
text-align :center
.header-input
flex:1
background :#ffffff
border-radius :.5rem
</style>
每日一句送给您
趁年轻,余额不足可以挣电量不足可以充,时间匆匆不再回来,趁年轻就去多付出,不攀比,不抱怨,不计较,多付出,因为有一种努力叫靠自己!