Bagaimana untuk mencipta sistem CSS dinamik dalam aplikasi Vue 3?

Question

Saya sedang mengusahakan aplikasi yang akan digunakan oleh banyak pelanggan yang berbeza, tetapi "tema" tidak boleh dikongsi antara pelanggan kerana skema warna mereka dianggap milik dan sulit, walaupun saya tahu ini kedengaran tidak masuk akal.

Kini, warna berada di bahagian utama App.vue 组件中定义的，没有 <style> 而不是 <stylescoped>, dan kemudian komponen hiliran diliputi.

Cara ia berfungsi pada masa ini ialah saya menggunakan pembolehubah CSS untuk menentukan warna dan kecerunan.

Saya lebih kurang mencari penyelesaian yang melakukan sesuatu seperti pseudokod:

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

Sila ingat bahawa semua komponen hiliran menggunakan pembolehubah ini dan ia adalah aplikasi yang sangat besar.

Saya menggunakan Vite untuk penggabungan (jika itu berkesan).

Answer 1

Anda boleh mencipta .css 文件，为每个客户端导出这些 css 变量。然后，在 main.js titik masuk di mana anda boleh mengimport fail yang sepadan dengan pelanggan ini:

const clientName = import.meta.env.CLIENT_NAME

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