1. 先下载less：npm i less-loader less --save-dev
2. npm i style-resources-loader --save-dev
3. vue.config.js配置

方法1

css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      less: {
        globalVars: {
          'theme-color': '#421466'
        }
      }
    }
  }
  // 在.vue文件中使用,缺点：每新增一个变量，需重新启动项目
<style lang='less' scoped>
   .p{
       color:@grey; //声明的less样式变量
   }
 </style>

方法2
1.先下载：npm i style-resources-loader --save-dev
2.vue.config.js配置

function addStyleResource(rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
    // 需要引入的公共文件
      patterns: [
        path.resolve(__dirname, './src/assets/css/reset.less'),
        path.resolve(__dirname, './src/assets/css/variable.less')
      ]
    })
  }
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
    }
 

// 在variable.less文件中声明变量
@grey: #979797;
@theme-color: #B39C90;
@bg-menu: #E9E1DE;
@title-color: #646464;


// 在.vue文件中使用：
<style lang='less' scoped>
   .p{
       color:@grey; //声明的less样式变量
   }
 </style>