1.打开项目终端,进行安装;
npm install --save-dev less-loader less
如安装后报错,降低版本后重试(以下是自测无报错的版本)
npm install --save-dev less-loader@5.0.0 less@4.1.2
2.使用less;
<style lang="less" scoped>
//less变量
@abbBgblue: skyblue; //天蓝色的变量
@abbBgyellow: yellowgreen; //黄绿色变量
@abbBgpink: pink; //粉色变量
.abb {
width: 100px;
height: 100px;
}
//less嵌套
.box1 {
width: 150px;
height: 150px;
background: @abbBgb; //使用变量
.box2 {
.abb(); //less混入(可简写成 .abb;)
background: @abbBgyellow; //使用变量
.box3 {
width: 50px;
height: 50px;
background: @abbBgpink; //使用变量
&:hover { //less带选择器混合
background: black;
}
}
}
}
</style>
到这里你已经可以用less写项目了,已经掌握了less的基本语法👍
扩充
-
以上代码中lang是什么意思?
lang指的是在此style中将使用的css预处理器,如使用less,即lang="less"。
-
以上代码中scoped是什么意思?
scoped表示是局部作用域,只作用于本组件,其他组件访问不到style内容。