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>