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

实现流程：在less文件中使用:export{}导出变量，在vue文件中使用import导入变量assets/style/common.less文件代码：// 定义变量@main-color: #f00;// 导出变量:export {mainColor: @main-color;}vue文件代码：<template><div :style="{color: styleColor

arkwok

2916人浏览 · 2021-07-16 16:37:47

arkwok · 2021-07-16 16:37:47 发布

实现流程：在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>