javascript - 怎样用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等主题文件。

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

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

Answer 1

我的建议是让你的皮肤样式css文件的编译过程独立出来。

你现在是直接在.vue文件里引用了less变量，所以肯定做不到。我建议是.vue文件里不要直接引用less变量，改用普通的class。

一旦将皮肤和项目本身互相独立开来，那就很好办了：

• 在gray.less/red.less里定义好less变量的值。

• 参考《webpack多页应用架构系列（五）：听说webpack连less/css也能打包？》，利用less-loader和ExtractTextPlugin，配合多入口，就可以分别将gray.less/red.less打包成gray.css/red.css了。