Javascript 如何使用更少的资源在vue/webpack中创建主题

我使用vue和webpack来编写单文件组件，使用

less loader

来解析组件文件中的

字段

我正在寻找一个很好的方式，能够写的网站主题。理想情况下，我希望有单独的

主题。较少的
文件如下：

src
|--themes
|  |-- light.less
|  |-- dark.less
|--components
   |-- app.vue
   |-- nav.vue

其中，theme.less文件由通用变量组成：

@bg:hsl（251,44,95%）；
@亚组：hsl（251,18,81%）；
@表面：hsl（251,18,81%）；
@文本：hsl（0,0%，0%）；
@链接：。。。

因此，我可以以主题无关的方式编写组件级样式：


#主要内容{
背景色：@bg；
颜色：@text；
边框：@primary；
}

并生成css，将我提供的样式包装到主题类中：

.light#主要内容{
背景色：[@bg在光线中可变。小于]；
颜色：[@text-variable-in-light.less]；
边框：[@primary variable in light.less]；
}
.dark#主要内容{
背景色：[@bg变量在黑暗中。较少]；
颜色：[@text变量为暗色，小于]；
边框：[@primary variable in dark.less]；
}

这样我就可以将主题类应用于根元素，如
，并显示适当的样式

最好的方法是什么



目前，我已经实现了自己的解决方案，它使用
样式资源加载程序提供的
注入
功能：

module.exports=函数（源、资源）{
让newSource=source.trim（）；
让主题=资源.map（v=>{
设o={}；
o、 默认值=v.content.startsWith（“/**默认值**/”）；
o、 name=v.file.split（'/'）.pop（）.replace（/\.[^/]+$/，“”）；
返回o；
});
让wrappers=themes.map（v=>`
${v.default？'body'：'.+v.name}{
@导入（引用）“../themes/${v.name}.less”；
`);
让我们一起去吧；
wrappers.forEach（w=>{
已编译+=w+newSource+'\n}\n'；
})
已编译的返回
}

对于每个组件的
样式
代码，它会创建多个主题类块，如

.light{
@导入（参考）“../themes/light.less”；
[注入源代码]
}
.dark{
@导入（参考）“../themes/dark.less”；
[注入源代码]
}

并在导入后插入样式代码，允许将组件中的
@变量
引用的范围限定为主题，并输出包含多个主题类中的所有样式的css（因此复制我为每个可用主题编写的所有样式）

我主要是问，是否有更好的方法来实现这一点，可能是通过webpack、vue中的一些内置功能，或者是我忽略了的其他功能

谢谢大家!
 我也有同样的需要。一、 然而，我们选择了另一种使用CSS变量的方法

重构较少的变量，如：

@bg:      var(--bg, lime);
@sub:     var(--sub, lime);
@surface: var(--surface, lime);
@text:    var(--text, lime);
@link:    ...

然后定义每个主题的CSS变量：

:root {
  --bg:      hsl(251, 44%, 95%);
  --sub:     hsl(251, 18%, 81%);
  --surface: hsl(251, 18%, 81%);
  --text:    hsl(0, 0%, 0%);
  --link:    ...
}

这基本上就是你需要的一切。它工作得非常好，甚至还有一个额外的好处，就是我甚至可以使用开发工具直接在浏览器中使用颜色，或者将它们添加为用户设置，以允许用户定义自己的主题。
因此，使用此解决方案，您会在dark.less和light.less文件中定义CSS变量，然后将它们导入到类似的文件中吗main.less文件？这将是一个简单的用法是的。您必须根据自己的需要自行决定是否加载所有主题并通过切换body元素上的（类）属性等方式进行切换，还是在按需加载主题时进行更高级的切换。