如何在 Vue 3 应用程序中创建动态 CSS 系统?
How can I create a dynamic CSS system in a Vue 3 app?
我正在开发一款可供许多不同客户使用的应用程序,但“主题”不能在客户之间共享,因为他们的配色方案被认为是专有和机密的,尽管我知道这听起来很荒谬。
现在,颜色是在主要 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 进行捆绑,如果有区别的话。
您可以创建一个 .css
文件,为每个客户端导出这些 css 变量。然后,在您的 main.js
入口点,您可以导入对应于该客户端的文件:
const clientName = import.meta.env.CLIENT_NAME
import `@/assets/themes/${clientName}.css`;
我正在开发一款可供许多不同客户使用的应用程序,但“主题”不能在客户之间共享,因为他们的配色方案被认为是专有和机密的,尽管我知道这听起来很荒谬。
现在,颜色是在主要 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 进行捆绑,如果有区别的话。
您可以创建一个 .css
文件,为每个客户端导出这些 css 变量。然后,在您的 main.js
入口点,您可以导入对应于该客户端的文件:
const clientName = import.meta.env.CLIENT_NAME
import `@/assets/themes/${clientName}.css`;