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>