vue项目里使用less 方法

1、首先使用npm下载依赖；

安装 less：npm install --save less less-loader
安装 sass：npm i node-sass sass-loader --save

2、安装完成后检查是否安装成功；

lessc -v

引用方法

1、在main.js

import` `less from ``'less'
Vue.use(less)

2、然后创建一个.vue文件我们开始玩耍了；

注意：独立的vue文件需要引入less

开始使用

1、less中变量的使用；

在less，允许我们使用以变量的形式来定义，定义方式：@k:v; 使用方式：@k;

此时就会有一个宽100px,高100px，背景红色的正方形显示在页面上了;

<div class="box"></div>
 
<style lang="less">
@color:red;
@k:100px;
.box{
	width:@k;
	height:@k;
	background: @color;
}
</style>