1.首先在node中安装less的库和依赖:
npm install less less-loader --save //将less和less-loader安装到开发依赖
2.在vue文件中的webpack.conf.js(有的是webpack.base.conf.js)中添加对less的引用:
module: {
rules: [
//以上省略其他的加载引用
{
test: /\.less$/,
loader: 'less-loader',
loader: "style-loader!css-loader!less-loader",
},
]
},
3.新建less文件,在.vue中引用就可以了:
<style type="text/less" lang="less" scoped>
@import '../utils/less/index.less'; //自己less文件的路径
</style>
4.如果想要使用内嵌式的样式的话在style中修改一下就行了,如下:
<style lang="less" scoped>
</style>
5.有些人在使用4的时候可能会出现less的定义未被识别的问题可以试试修改成一下的样式:
<style type="text/less" lang="less" scoped>
</style>