vue3 根据变量来配置.less主题颜色

1、声明主题颜色及环境变量

    <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#004FFF',
      },
    }"
  >
  <App class="h-full w-full" :style="{ '--primary-color': state.primaryColor }">
    <AppProvider>
      <RouterView />
    </AppProvider>
  </App>
  </a-config-provider>

const state = reactive({
  primaryColor: '#004FFF',
})

2、其他.less文件内引入该变量

.aa{  
  z-index: 0 !important;
  color: var(--primary-color);
  background-color: #e8f4ff;
}