搜尋

首頁  >  問答  >  主體

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

用的是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.cssred.css等主题文件。

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

如果不可行,有其他的实现方法吗?

大家讲道理大家讲道理2896 天前492

全部回覆(1)我來回復

  • ringa_lee

    ringa_lee2017-04-10 17:37:07

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

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

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

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

    • 参考《webpack多页应用架构系列(五):听说webpack连less/css也能打包?》,利用less-loaderExtractTextPlugin,配合多入口,就可以分别将gray.less/red.less打包成gray.css/red.css了。

    回覆
    0
  • 取消回覆