Wie erstelle ich ein dynamisches CSS-System in einer Vue 3-Anwendung?

Question

Ich arbeite an einer App, die von vielen verschiedenen Kunden verwendet wird, aber „Themen“ können nicht zwischen Kunden geteilt werden, da ihre Farbschemata als proprietär und vertraulich gelten, obwohl ich weiß, dass das lächerlich klingt.

Jetzt steht die Farbe im Vordergrund App.vue 组件中定义的，没有 <style> 而不是 <stylescoped>, und dann werden die nachgelagerten Komponenten erfasst.

Die Art und Weise, wie es derzeit funktioniert, ist, dass ich CSS-Variablen verwende, um Farben und Verläufe zu definieren.

Ich suche mehr oder weniger nach einer Lösung, die so etwas wie Pseudocode macht:

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;
}

Bitte denken Sie daran, dass alle nachgeschalteten Komponenten diese Variablen verwenden und es sich um eine sehr große Anwendung handelt.

Ich verwende Vite zum Bündeln (falls das funktioniert).

Answer 1

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

const clientName = import.meta.env.CLIENT_NAME

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