第一步 安装

此处我使用的是cnpm安装，并记录到devDependencies中，因为这是我们在开发中使用的而非在生产中使用，所以就不将之记录在 dependencies 中。

cnpm install less less-loader --save-dev

第二步 在单文件组件引用

在style标签中加入lang='less’就可以。

<template>
    <div>
        fhkdl
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang='less'>
    @color:rgb(219, 86, 86);
    div{
        color: @color;
    }
</style>

全局使用

此时直接在src下的assets文件夹 下建立less文件夹，里面可以放共用的less文件，最后一步就在App.vue中使用@import，注意：style标签需要添加lang='less',否则引入就无效！

<style lang='less'>
@import '../src/assets/less/global.less';
</style>

但是这种写法，过于麻烦，不符合全局引用的思想。下方介绍的这个方法，比较实用，适合于全局的less文件一次性引入到每个组件当中，不过你仍然需要在App.vue当中引入哦，否则不是变量的的全局设置不会被使用
1、首先需要在根目录下安装Style Resources Loader，

cnpm install style-resources-loader -D

2、在build/utils.js文件下加入这个代码

记得更改成你的全局路径

if(loader == 'less'){
      loaders.push({
       loader: 'style-resources-loader',
       options: {
        patterns: path.resolve(__dirname, '../src/assets/less/global.less')
       }
      })
    }

这样一来就大功告成了，不需要再单独引入了。直接调用全局的变量和函数都是OK的
global.less文件

@active-color:#036eb8;
@common-color:#fff;
@common-font:14px times,'微软雅黑';

body,a{
    color: @common-color;
    font:@common-font;
}

.common{
    width: 1170px;
    margin: 0 auto;
}

某个子组件当中，他也是不会报错的

<style lang="less">
    @head-height:72px;
    .header{        
        height:@head-height;
        .common();
    }
    .header a{
        color: @active-color;
    }
</style>