如何在 Vue 3 应用程序中创建动态 CSS 系统？

Question

我正在开发一个许多不同客户都会使用的应用程序，但“主题”无法在客户之间共享，因为它们的配色方案被认为是专有和机密的，尽管我知道这听起来很荒谬。

现在，颜色是在主 App.vue 组件中定义的，没有 <style> 而不是 <stylescoped>，然后下游的组件都被限定范围。

目前的工作方式是我使用 CSS 变量来定义颜色和渐变。

我或多或少正在寻找一种可以执行类似伪代码的解决方案：

const clientName = import.meta.env.CLIENT_NAME

if (clientName === 'abc') {

  :root {
    --background-color: #f3f3f3;
    --default-font-color: #000000;
    --primary: #8c4799;
    --secondary: #d22630;
    --gradient-primary: rgba(140, 71, 153, 0.2) 4.55%;
    --gradient-secondary: rgba(210, 38, 48, 0.02) 105.67%;
    --failure-color: #b94527;
    --badge1: #419bbe;
    --badge1text: #ffffff;
    --c-white: #f2f2f2;
  }

} else if (clientName === 'def') {
    --background-color: #0c0c0c;
    --default-font-color: #ffffff;
    --primary: #c1fc3d;
    --secondary: #d22630;
    --gradient-primary: rgba(110, 71, 153, 0.2) 3%;
    --gradient-secondary: rgba(190, 38, 48, 0.02) 50%;
    --failure-color: #b94527;
    --badge1: #419bbe;
    --badge1text: #ffffff;
    --c-white: #ffffff;
}

请记住，所有下游组件都使用这些变量，并且它是一个非常大的应用程序。

我正在使用 Vite 进行捆绑（如果这有效果的话）。

Answer 1

您可以创建一个 .css 文件，为每个客户端导出这些 css 变量。然后，在 main.js 入口点上，您可以导入与该客户端对应的文件：

const clientName = import.meta.env.CLIENT_NAME

import `@/assets/themes/${clientName}.css`;