Vue模板中使用数据绑定less变量

实现流程：在less文件中使用:export{}导出变量，在vue文件中使用import导入变量

assets/style/common.less文件代码：

// 定义变量
@main-color: #f00;
// 导出变量
:export {
  mainColor: @main-color;
}

vue文件代码：

<template>
	<div :style="{color: styleColor}"></div>
</template>

<script>
import { mainColor} from '@/assets/style/common.less';
export default {
  name: 'WorkName',
  data () {
  	styleColor: mainColor
  }
}
</script>