Javascript 使用Vue，如何根据某些逻辑/数据加载不同的CSS文件？

我正在尝试为我的应用程序启用不同的主题选项，用户可以从中选择

我知道我可以在

标记上切换出一个类，但这会使CSS比只使用两个不同的.scss文件和不同的变量值更混乱

---

有什么想法吗

我想不出一个优雅的方法来做这件事。如果您使用的是单文件组件（SFC），则可以使用。从

vue加载程序

在一个
*.vue
组成部分。为了避免注入的样式相互覆盖，可以
通过提供
模块属性值


/*标识符作为*/
/*标识符注入为b*/

因此，您可能有一个用于常用样式的样式标记，以及用于特定于主题的样式的其他样式标记。然后，您可以使用使用您的逻辑返回模块名称的computed属性来决定从哪个模块/样式标记中选择一个类。
想不出任何特定于Vue的方法，但使用纯Javascript

const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);

（显然，默认情况下您将加载普通样式表，而备用样式表将需要完全覆盖普通样式表中不需要的任何规则。）

const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);