如何在VUE 3应用中创建动态CSS系统？
我正在使用许多不同客户使用的应用程序，但是在客户之间无法共享“主题”，因为他们的配色方案被认为是专有和机密的，即使我知道这听起来很荒谬。
目前，颜色是在没有＆lt; style＆gt;的主要app.vue组件中定义的然后从那里下游这些组件都瞄准了。
目前的工作方式是我正在使用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捆绑。
I am working on an app that many different clients will use, but the "themes" can't be shared between clients because their color schemes are considered proprietary and confidential even though I'm aware that sounds absurd.
Right now, the colors are defined in the main App.vue component without the <style> instead of <style scoped>, and then downstream from there the components are all scoped.
The way it currently works is that I'm using CSS variables to define the colors and gradients.
I'm more or less looking for a solution that could do something like this pseudo-code:
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;
}
Keeping in mind that all of the downstream components use these variables and it's a pretty large app.
I'm using Vite for bundling if that makes a difference.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以为每个客户端创建一个
.css文件导出这些CSS变量。然后，在您的main.js输入点上，您可以导入与该客户端相对应的文件：You can create one
.cssfile exporting these css variables for every client. Then, on yourmain.jsentry point, you can import the file corresponding to that client: