基于webpack4 vue-cli3项目实现换肤功能

引起

最近由于公司的需要，需要实现主题剥皮功能，不仅仅是改变颜色，还需要改变图片、字体等文件。所以在百度各种实现方案后，决定按照SCSS风格-加载器/可用做皮肤。

项目开始

首先，我们用一个开源的后台管理系统项目vue-element-admin来演示演示。为了方便二次开发，我们下载了vue-admin-template进行开发。

//从github下载vue-admin-模板克隆。https://github.com/PanJiaChen/vue-admin-template.gitcd的效果vue-admin-template NPM安装NPM运行dev运行成功后

安装样式加载器处理器

因为vue-admin-template项目依赖于sass-loader，所以我们不需要再次安装它，但是它已经在上一步安装好了。

Npm安装样式-加载器-保存-开发创建主题文件

在src目录中创建主题粉笔和主题灯的主题文件夹，并创建索引。可用。两个主题目录中的scss文件

index . usable . SCS中的写作风格

//主题-粉笔/index . usable . scsbody { background : red；}//theme-light/index . usable . scssbody { background : green；}

此时，我们的主题风格已经建立，现在我们必须应用主题

在vue.config.js中添加样式加载器/可用

vue-cli2根vue-cli3的配置差异比较大，我在配置的过程中遇到了很多坑，因为vue-cli3没有webpack.config.js文件，所以在配置webpack的时候不能按照旧的文档进行配置，需要熟悉cli3的webpack-chain来进行链式修改配置，但是文档很少，使得配置过程异常困难。

通过在配置文件中修改chainWebpack链中的webpack配置，可以成功地应用加载器，无需多说，直接编码，

//skinning loader const scss=config . module . rule(' scss ')。to config()；常量可用={ 0.SCS . oneof[3]，test :/\ . usable . SCS $/}；可用. use=[.used . use]；usable . use[0]={ loader : ' style-loader/usable ' }；config . module . rule(' SCS ')。合并({ oneof :[可用]})；

使用主题

所有准备工作完成后，我们将开始使用主题风格。

为什么要用风格加载器换皮肤？原因是样式加载器提供了可用的API，可以动态加载和删除链接文件。有关详细信息，请参见样式加载器。

在src目录下，创建主题. js文件

const cache={ }；const themeAction={粉笔(){ if(！cache .粉笔){ cache .粉笔=import('。/style/theme-粉笔/index . usable . SCS’)；}返回cache .粉笔；}，light() { if(！cache . light){ cache . light=import('。/style/theme-light/index . usable . SCS’)；}返回cache.light}};让current=nullasync函数setTheme(主题){ if(theme action[主题]){ const style=wait theme action[主题])；if(current){ current . unref()；} style . ref()；当前=样式；} } window.setTheme血红素=set血红素；导出默认设置主题；在main.js中，引入theme.js

从“”导入设置主题。/theme//使用主题设置主题(“粉笔”)重新启动服务并检查效果

在实际项目中，主题颜色可以根据进来的主题(粉笔/灯光)动态切换，可以根据业务需求创建多个主题。我们只需要在index . usable . scss文件中写入样式变量。

摘要

以上是边肖推出的基于webpack4 vue-cli3的换肤功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！