Question

我正在尝试为用户的应用程序启用不同的主题选项，供用户选择。

我知道我可以在<body>标记上切换一个类，但这将使CSS变得比仅使用两个具有不同变量值的不同.scss文件更加混乱。

有什么想法吗？

Answer 1

我想不出一种优雅的方法来做到这一点。如果您使用单个文件组件（SFC），则可以使用CSS modules。来自vue-loader documentation ..

您可以在一个<style>中包含多个*.vue标签零件。为了避免注入的样式相互覆盖，可以通过提供以下内容来自定义注入的计算属性的名称模块属性值

<style module="a">
  /* identifiers injected as a */
</style>

<style module="b">
  /* identifiers injected as b */
</style>

因此，您可能具有用于常见样式的样式标签，以及用于主题特定样式的其他样式标签。然后，您可以使用计算出的属性来决定从哪个模块/样式标签中选择一个类，该属性使用您的逻辑来返回模块的名称。

Answer 2

无法想到任何特定于Vue的方法，但是使用纯Javascript

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

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