怎样用webpack生成不同的主题样式，实现换肤功能

Question

用的是vue和less，用webpack做构建工具。

现在有一个需求，要实现用户可以选择更改皮肤。

我的想法如下：

用less变量来管理颜色等变量，每套皮肤一个less变量文件，每个文件里的变量名相同，只是值不一样。如gray.less,red.less文件，里面分别有@color: red, @color:gray等变量

然后将gray.less,red.less文件全部统一在main.less中，main文件大概如下：

@import 'gray.less';
@import 'red.less';

然后在.vue文件的style中引入main.less，这样.vue文件就可以引用到@color等变量了

现在想用webpack将用到main.less的变量的样式抽出来，按照不同的皮肤自动生成gray.css和red.css等主题文件。

请问一下这样是否可以，如果可行，要怎样实现？

如果不可行，有其他的实现方法吗？