Vue.js 在Vue中有条件地设置主颜色

我在Vue中编写了一个可重用的应用程序，并将其编译为库。我在SCSS文件中设置全局变量

$brand color

，它是应用程序的主颜色（按钮、边框、字体颜色）。我在其他SCSS组件文件中使用此变量

我已经把我的应用程序放到了我客户的网站上，一切正常。现在我有另一个客户愿意使用我的应用程序。但是新客户希望我的应用程序使用与旧应用程序不同的

$brand color

。解决这个问题的最佳方法是什么

我想到的一件事是将store变量的值设置为

$brand color

，这取决于

位置。host

和绑定所有“品牌”元素的样式

switch (location.host) {
 case 'client1.com':
    context.commit('setMainColor', '#ff0000');
    ...
 case 'client2.com':
    context.commit('setMainColor', '#16c100');
    ...
}

但这将是非常痛苦的。我需要在所有组件中应用大量更改。有没有更好的解决方案可以绑定所有组件的样式

---

顺便说一下，我不能使用CSS变量，因为代码需要对IE友好。

您可以有2个文件，每个文件为不同的客户定义一个scss变量：

customer1\u变量.scss

$brand-color: green

$brand-color: red

switch (location.host) {
 case 'client1.com':
    import './customer1_variables.scss'
    ...
 case 'client2.com':
    import './customer2_variables.scss'
    ...
}

客户2_变量.scss

$brand-color: green

$brand-color: red

switch (location.host) {
 case 'client1.com':
    import './customer1_variables.scss'
    ...
 case 'client2.com':
    import './customer2_variables.scss'
    ...
}

您可以将其导入javascript文件中

main.js

$brand-color: green

$brand-color: red

switch (location.host) {
 case 'client1.com':
    import './customer1_variables.scss'
    ...
 case 'client2.com':
    import './customer2_variables.scss'
    ...
}

---

另一个解决方案是使用vue样式的组件。您可以查看更多详细信息

，因此最后我根据我的客户机和为每个客户机指定的SCSS类的准备集设置存储值，即：

.btn-client1 {
 background: red;
}

.btn-client2 {
 background: blue;
}
...

我为特定元素绑定了类：

:class="`btn-${client}`"`

---

我认为不允许动态导入。编译时出现以下错误：

“导入”和“导出”可能仅出现在顶层

使用vue样式组件也可能会造成混淆，因为我的应用程序中几乎所有使用自定义样式的组件。