怎样用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等主题文件。请问一下这样是否可以，如果可行，要怎样实现？如果不可行，有其他的实现方法吗？