安装

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>

每日一句送给您

趁年轻，余额不足可以挣电量不足可以充，时间匆匆不再回来，趁年轻就去多付出，不攀比，不抱怨，不计较，多付出，因为有一种努力叫靠自己！