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

Question

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

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

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

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

是否可以从组件状态共享这些SCSS文件块颜色的JSON？请想象下面的图片。

** 更正 **

1. this.colors = colors.data

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

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

提前感谢。

Answer 1

无法像您想要的那样动态更新SCSS变量的值。 Web浏览器不了解SCSS，仅了解CSS。 SCSS会提前编译成CSS；变量被编译掉。

最近，CSS variables已经成为一件事，所以也许您可以考虑研究。

除此之外，您通常不会对样式表进行动态更新。您可能正在寻找某种CSS-in-JS解决方案。

Answer 2

SCSS的主要功能是将可读性/ less肿性较小的CSS编译为普通CSS。无法在单个文件组件中即时调整样式。

请参阅此问题以获取可能的解决方法：https://stackoverflow.com/a/48201646/6803592

如果您正在寻找解决方案，则可能会在您的vue应用加载时获得之前的颜色。

Answer 3

我想我把它钉了！！但是我不太确定是否建议这样做。我什至不知道这样做的好处。但这确实有效！ ：）

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及以下版本中不起作用！