Comment créer un système CSS dynamique dans une application Vue 3 ?

Question

Je travaille sur une application qui sera utilisée par de nombreux clients différents, mais les « thèmes » ne peuvent pas être partagés entre les clients car leurs schémas de couleurs sont considérés comme propriétaires et confidentiels, même si je sais que cela semble ridicule.

Maintenant, la couleur est principale App.vue 组件中定义的，没有 <style> 而不是 <stylescoped>, puis les composants en aval sont définis.

La façon dont cela fonctionne actuellement est que j'utilise des variables CSS pour définir les couleurs et les dégradés.

Je cherche plus ou moins une solution qui fasse quelque chose comme du pseudocode :

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

N'oubliez pas que tous les composants en aval utilisent ces variables et qu'il s'agit d'une très grande application.

J'utilise Vite pour le regroupement (si cela fonctionne).

Answer 1

Vous pouvez créer un .css 文件，为每个客户端导出这些 css 变量。然后，在 main.js point d'entrée sur lequel importer le fichier correspondant à ce client :

const clientName = import.meta.env.CLIENT_NAME

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