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

Question

我在 Vue 中编写了一个可重用的应用程序，并将其编译为一个库。我在 SCSS 文件中设置了全局变量 $brand-color，它是应用程序的主要颜色（按钮、边框、字体颜色）。我在其他 SCSS 组件文件中使用了这个变量。

我已将我的应用程序放到客户的网站上，一切正常。现在我有另一个客户愿意使用我的应用程序。但是......新客户希望我的应用程序与我的旧应用程序不同$brand-color。解决这个问题的最佳方法是什么？

我想到的一件事是设置值为$brand-color 的存储变量，这取决于location.host 并绑定所有“品牌”元素的样式。

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

但这会很痛苦。我需要在我的所有组件中应用很多更改。有没有更好的解决方案对所有组件进行样式绑定？

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

Answer 1

所以最后我根据我的客户设置存储值，并为每个客户准备了一组指定的 SCSS 类，即：

.btn-client1 {
 background: red;
}

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

我为特定元素绑定了类：

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

Answer 2

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

customer1_variables.scss

$brand-color: green

customer2_variables.scss

$brand-color: red

你可以在javascript文件中导入它

ma​​in.js

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

另一个解决方案是使用 vue-style-component。您可以查看this article了解更多详情