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

【问题标题】：With Vue, how would I load different CSS files depending on some logic / data?使用 Vue，我将如何根据某些逻辑/数据加载不同的 CSS 文件？
【发布时间】：2019-04-16 20:43:42
【问题描述】：

我正在尝试为我的应用启用用户可以选择的不同主题选项。

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

有什么想法吗？

【问题讨论】：

标签： javascript vue.js sass

【解决方案1】：

我想不出一种优雅的方式来做到这一点。如果您使用的是单文件组件 (SFC)，则可以使用 CSS modules。来自vue-loaderdocumentation..

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

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

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

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

【讨论】：

【解决方案2】：

想不出任何特定于 Vue 的方法，但使用纯 Javascript

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

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

【讨论】：