如何在 Vue 3 應用程式中建立動態 CSS 系統?
P粉826283529
P粉826283529 2024-01-07 19:49:37
0
1
535

我正在開發一個許多不同客戶都會使用的應用程序,但「主題」無法在客戶之間共享,因為它們的配色方案被認為是專有和機密的,儘管我知道這聽起來很荒謬。

現在,顏色是在主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 進行捆綁(如果這有效果的話)。

P粉826283529
P粉826283529

全部回覆(1)
P粉318928159

您可以建立一個 .css 文件,為每個客戶端匯出這些 css 變數。然後,在 main.js 入口點上,您可以匯入與該用戶端對應的檔案:

const clientName = import.meta.env.CLIENT_NAME

import `@/assets/themes/${clientName}.css`;
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板