安装:npm install less less-loader --save-dev
接下来找到bulid目录下的webpack.base.conf.js并打开,找到module下的rules写下配置:
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
然后在组件中就可以使用了:
<style lang="less" scoped>
@import '../../assets/less/common.less'; //引用less文件
@bg: #f5f5f5; //定义变量
.card {
width: 100%;
height: 100%;
overflow: auto;
background: @bg; //变量使用
position: absolute;
//嵌套规则写法:
&:hover{
cursor: pointer;
}
.top {
color: @bg;
}
}
</style>
less语言的嵌套规则,可精简的代码,可使样式之间的关系一目了然,变量的使用也带来了很大的用处。
less文件可引入组件中使用,也可全局使用公共less文件方法,全局引用方法可参考:https://www.jianshu.com/p/eedfe892accc
当然,还有更多的使用方法与规则,感兴趣的可自行百度……
注:文章参考:https://blog.csdn.net/weixin_40776188/article/details/85067568