vuejs 在单个文件 vue 组件中具有范围 css 的多个主题

Posted 2023-02-22

【中文标题】vuejs 在单个文件 vue 组件中具有范围 css 的多个主题

【英文标题】：vuejs multiple themes with scoped css in single file vue components

【发布时间】：2018-02-16 10:44:51

【问题描述】：

假设我们有一个变量 scss 文件，如下所示

$darken-percentage: 15%;

$primary-color: #2aaae1;
$dim-primary-color: darken($primary-color, $darken-percentage);

$complementary-color: #faaf48;
$dim-complementary-color: darken($complementary-color, $darken-percentage);

$background-color: #1d1f29;

$middleground-color: #313444;
$dim-middleground-color: darken($middleground-color, $darken-percentage);
$light-middleground-color: lighten($middleground-color, $darken-percentage);

在 main.js 中我们可以使用@import 'variables.scss' 如果我有两个主题并且我想更改用户操作我可以有 2 个变量文件并根据用户操作有条件地导入，但是单文件 vue 组件呢 喜欢

<style scoped lang="scss">
  @import '../../theme/_variables.scss';
  .bm-upload
    background: $primary-color;
  
</style>

然后导入将不起作用所以无论如何我有全局变量文件并在其他文件中使用它而不重新导入它

【参考方案1】：

最简单的方法是导入两个样式文件并更改父元素的类。当类发生变化时，浏览器会立即应用样式。

例如，您可以使用 classList 更改正文的类，并让所有样式都依赖于此。

created()
    let body = document.getElementsByTagName('body')[0];
    body.classList.add("theme1");
,
methods: 
    changeTheme()
        let body = document.getElementsByTagName('body')[0];
        body.classList.remove("theme1");
        body.classList.add("theme2");
    

样式应该继承自主题类名，像这样：

.theme1 
    .exampleClass 
       padding: 0;
    

【讨论】：

虽然 Vue 通常不需要 Dom 操作，但在这种情况下，Body 位于 Vue 实例之外，使用浏览器的 classList 就可以了

但是我将无法使用作用域样式，这是整个问题的关键

范围样式不适用于此用例。为什么需要范围样式？您是否担心与其他组件发生冲突？

但即使我没有范围样式，至少我希望我的组件样式与我的组件在同一个文件中，我该如何实现这一点

只需将样式放在组件文件中即可。如果样式没有作用域，则它们适用于任何地方。