亲测步骤如下:
1,在项目目录下开启命令行,运行如下命令,安装 less 和 less-loader:
npm install less less-loader --save-dev
成功标识如下:

2,安装成功后,打开 build/webpack.base.conf.js
,在 module.exports =
的对象的 module.rules 数组尾部添加如下代码:
module.exports = {
// 此处省略已有内容
module: {
rules: [
// 此处省略已有的其他规则内容
{
//增加less配置支持
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
}
3,使用时,在组件中的 style 标签中 加上 lang="less"
:
<style lang="less" scoped>
.main{
/*待删除的设置*/
border:1px solid red;
margin-top:0.4rem;
.profit{
/*待删除的设置*/
border:1px solid green;
}
.content{
/*待删除的设置*/
border:1px solid blue;
}
}
</style>
最后,实际测试效果如下:

Tom哥的博客博文分类和索引页面地址:https://blog.youkuaiyun.com/tom_wong666/article/details/84137820