vue.js 2.0中使用less

說明，使用的是npm init webpack 項目名方式創建的項目,無需手動配置webpack

 

1.安裝less依賴

npm install less less-loader --save

 

2.xx.vue組件中使用less

<style lang="less" rel="stylesheet/less">

.tab{
    display:flex;
    width:100%;
    height:40px;
    line-height:40px;
}
.tab .tab-item{
    flex:1;
    text-align:center;
      &>a{display: block;
         &.active{color: @color}
      }
}
  @color:red;
</style>