jet*_*lej 5 javascript sass vue.js
我正在尝试为用户可以选择的应用启用不同的主题选项。
我知道我可以在<body>标签上切换一个类,但这会使 CSS 比仅使用两个具有不同变量值的不同 .scss 文件更加混乱。
有任何想法吗?
我想不出一种优雅的方法来做到这一点。如果您使用单文件组件 (SFC),则可以使用CSS 模块。从vue-loader 文档中..
<style>一个组件中可以有多个标签*.vue。为了避免注入的样式相互覆盖,您可以通过为模块属性提供一个值来自定义注入的计算属性的名称
<style module="a">
/* identifiers injected as a */
</style>
<style module="b">
/* identifiers injected as b */
</style>
Run Code Online (Sandbox Code Playgroud)
因此,您可能有一个用于常见样式的样式标签,以及用于特定主题样式的其他样式标签。然后,您可以使用计算属性来决定从哪个模块/样式标签中选择一个类,该计算属性使用您的逻辑返回模块名称。