如何利用webpack4和vue-cli3在项目中实现换肤功能?

更新于
2026-10-01 04:52:48
2阅读来源:SEO教程
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计905个文字,预计阅读时间需要4分钟。

如何利用webpack4和vue-cli3在项目中实现换肤功能?

起因+最近公司需求,需实现主题换肤功能,不仅需颜色等更改,还需包含图片、字体等文件替换。由于百度各种实现方案,决定使用根目录下的资源+SCSS+style-loader+useable进行换肤。

起因

最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤。

项目开始

首先我们用vue-element-admin这个开源的后台管理系统项目来做demo演示,为了便于做二次开发,下载vue-admin-template来开发。

// 从github下载vue-admin-template clone github.com/PanJiaChen/vue-admin-template.git cd vue-admin-template npm install npm run dev

运行成功后的效果

安装style-loader处理器

因为vue-admin-template项目是添加过sass-loader依赖的,所以不用我们再次安装,在上一步就已经安装好了。

阅读全文

本文共计905个文字,预计阅读时间需要4分钟。

如何利用webpack4和vue-cli3在项目中实现换肤功能?

起因+最近公司需求,需实现主题换肤功能,不仅需颜色等更改,还需包含图片、字体等文件替换。由于百度各种实现方案,决定使用根目录下的资源+SCSS+style-loader+useable进行换肤。

起因

最近因公司需求,需要实现主题换肤功能,不仅仅是颜色的更改,还需要包括图片,字体等文件等更换,因此在百度里各种实现方案后,决定根据scss+style-loader/useable做换肤。

项目开始

首先我们用vue-element-admin这个开源的后台管理系统项目来做demo演示,为了便于做二次开发,下载vue-admin-template来开发。

// 从github下载vue-admin-template clone github.com/PanJiaChen/vue-admin-template.git cd vue-admin-template npm install npm run dev

运行成功后的效果

安装style-loader处理器

因为vue-admin-template项目是添加过sass-loader依赖的,所以不用我们再次安装,在上一步就已经安装好了。

阅读全文