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

Question

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

我的 ajax 调用位于名为created. ajax 完成后，它将根据结果填充本地数据库。

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

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

是否可以将组件状态中的颜色 JSON 共享到此 SCSS 文件中？请想象下面的图片。

**更正**

1. this.colors = 颜色.data

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

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

提前致谢。

标签： javascriptvue.jssassbabeljs

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及以下不工作！