我正在開發許多不同客戶將使用的應用程式，但不能在客戶之間共享“主題”，因為他們的配色方案被認為是專有和機密的，即使我知道這聽起來很荒謬。
現在，顏色是在主App.vue組件中定義的，沒有<style>代替<style scoped>，然后下游的組件都是作用域的。
它目前的作業方式是我使用 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 進行捆綁。
uj5u.com熱心網友回復：
您可以.css為每個客戶端創建一個匯出這些 css 變數的檔案。然后，在您的main.js入口點，您可以匯入與該客戶端對應的檔案：
const clientName = import.meta.env.CLIENT_NAME
import `@/assets/themes/${clientName}.css`;
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/480683.html
上一篇：VueJS、this.$route.query.page和Type'null'不可分配給type'string'