VueJS - 将数据中的全局变量共享到内部 scss 文件（动态 CSS）

Question

我有一个名为的主组件App.vue，在该文件中我正在向服务器调用 ajax 请求，该请求返回颜色的 JSON。

我的 ajax 调用位于名为 的 vue 生命周期钩子内部created。当ajax完成后，它将根据结果填充本地数据库。

在同一个文件中，我有用 SCSS 编写的样式。

<style lang="scss">
$primary: #ff2000;
$secondary: #000111;
</style>

是否可以共享此 SCSS 文件以阻止组件状态中的颜色 JSON？请想象一下所附的下图。

**更正**

1. this.colors = 颜色.data

2. .color-Secondary { 背景：$Secondary; }

颜色是动态的，这就是它来自数据库的原因。

提前致谢。

Answer 1

我想我已经成功了！！但我不太确定是否推荐。我什至还不知道进行此调整的好处和坏处。但它确实有效！:)

created() {
  // assume that this colors are coming from an async ajax call
  let colors = {
    primary: 'red',
    secondary: 'blue'
  }

  this.setThemeColors(colors);
},
methods: {
  setThemeColors(colors) {
    let style = document.documentElement.style;

    for (let key of Object.keys(colors)) {
      style.setProperty("--theme-color-" + key, colors[key]);
    }
  }
}

这一切都是从样式表的根部开始设置的。检查下面以使用它，

<style lang="scss">
$color-primary: var(--theme-color-primary);
$color-secondary: var(--theme-color-secondary);

.color-primary {
  color: var(--theme-color-primary)
}
.color-secondary {
  color: var(--theme-color-secondary)
}
</style>

但是遇到了另一个问题，css变量在IE11及以下版本中不起作用！