less配置全局公用變量文件，如何以變量的形式在html中 引入

一、在vue.config.js文件中

const path = require('path')

const vars = path.resolve(__dirname, './src/assets/css/common.less') 

module.exports = {
    css: {
        loaderOptions: {
            less: {
                globalVars: {
                    hack: `true; @import "${vars}"`,
                },
            },
        },
    },
}

 二、以變量的形式引入

1、在公共的less文件中導出

@menuBg:red;

:export {
    menuBg: @menuBg;
}

2.1、在man.js全局引入

import commonColor from './assets/css/common.less'

Vue.prototype.commonColor = commonColor

3、使用

//進度條自定義顏色
<el-progress :percentage="20" :color="commonColor.menuBg" />

4、局部引入（使用同上）

import commonColor from '@/assets/css/common.less'

//計算屬性
 computed: {
        commonColor() {
            return commonColor
        },
  },