vue项目实现一键网站换肤效果实例(webpack-theme-color-replacer的使用)

vue项目一键换肤功能前端vue换肤实现 vue实现换肤功能 2023-02-13 12:02:12 281人浏览泡泡鱼

摘要

目录前言CSS样式覆盖 - 最简单粗暴的力工做法LESS、SCSS变量覆盖 - 学会使用工具的做法CSS变量 - 新款工具的做法webpack-theme-color-replac&

前言

现在看不少网站都有一键换肤的效果，这东西要说简单有简单的做法，要说复杂有复杂的做法，看到ant design pro 源码使用了WEBpack-theme-color-replacer插件，就了解一下，记录下学习过程。

本文主要记录 webpack-theme-color-replacer插件的使用

CSS样式覆盖 - 最简单粗暴的力工做法

相信不少人都跟我曾经的做法一样，换肤还不简单，直接用css优先级的原来，进行css样式覆盖，简单粗暴一把梭，但是带来的问题就是，样式管理起来麻烦，不管是查找还是修改，都令人头疼，而且如果需要多套皮肤，还需要提前生成多套css，造成文件越来越大。应急或者力工优先选择。

LESS、SCSS变量覆盖 - 学会使用工具的做法

现在的项目也都使用预编译语言，所以变量也很常见了，使用变量也可以达到换肤的效果，也比css样式覆盖的做法，高级了很多，但是仔细一想，如果存在多套皮肤，最终的css文件还是会大大增加。这时我又想到了css的变量，请继续看后面。

CSS变量 - 新款工具的做法

什么？你还不了解css变量？那就看看这篇文章吧。

学会css变量看这一篇文章就够了

这个做法和最开始提到的使用css样式覆盖还是有点区别的，这个是用了变量，使用js重新给变量赋值，即可达到换肤的效果，所以还是高级了不少，应该也可以满足大部分的需求了。可是仔细一想，如果项目要求兼容各种古老浏览器，这个做法可能就不行了，至少现在还不是很好。

webpack-theme-color-replacer插件 - 令人惊叹的做法

直到我在查看ant design pro 源码的时候，发项目里使用了webpack-theme-color-replacer插件，看到作者实现功能的思路，感觉是我想学习的做法。

基本思路就是，webpack构建时，在emit事件（准备写入dist结果文件时）中，将即将生成的所有css文件的内容中带有指定颜色的css规则单独提取出来，再合并为一个theme-colors.css输出文件。然后在切换主题色时，下载这个文件，并替换为需要的颜色，应用到页面上。这样，下载的样式中就只包含颜色相关的css规则，文件较小；同时它已经包含了项目中所有的css中的指定颜色样式，一次下载全部颜色样式都搞定。

下面就以Vue项目详细说说这个插件是怎么使用的。

准备工作

本文仅记录了vue项目中如何使用webpack-theme-color-replacer，其它项目详情请自行了解。但也希望本文涉及的插件使用对你有帮助

安装插件

npm i -D webpack-theme-color-replacer

文中版本 "webpack-theme-color-replacer": "^1.3.3"

vue.config.js配置部分

const ThemeColorReplacer = require('webpack-theme-color-replacer')

module.exports = {
    configureWebpack: config => {
        new ThemeColorReplacer({
			// 需要提取到css文件的颜色数组（可以传入多个颜色值），支持rgb和hsl,也就是换肤改变颜色的变量
			 matchColors: ['#9564ca'],
			//可选.输出css文件名，支持[contenthash]和[hash]
			fileName: 'css/theme-colors-[contenthash:8].css',
			 // 可选的。将 css 文本注入 js 文件，不再需要下载 `theme-colors-xxx.css`。
			injectCss: true, 
        })
    },
}

模板内修改颜色：

<template>
  <div>
      <div class="item item-0"></div>
  </div>
</template>
<script>
// const client = require('webpack-theme-color-replacer/client')
import client from "webpack-theme-color-replacer/client";

export default {
  data() {
    return {
      
    };
  },
 
  created() {
    // 这里就直接5秒后换色了，模拟了用户点击一次换肤的过程
    setTimeout(() => {
      this.changeThemeColor('#69af23');
    }, 5000);
  },
  methods: {
    // 设置css新值，点击换肤时候会获取到新的颜色值，然后调用这个方法就行了
    changeThemeColor(newColor) {
      // newColors必须是个数组形式，数组长度一定要和配置中的matchColors长度一致，否则缺少的颜色就会出现问题
      // sass里的lighten貌似是使用hsl颜色增加亮度。 varyColor.js   里面的lighten、darke其实是将当前颜色与白色进行混合，与element-ui的色系一致。
      client.changer.changeColor({ newColors: [''+newColor] })
    }
  },
};
</script>

<style lang="scss" scoped>

// 基础色
$color: #9564ca;
.item{
  height: 30px;
  margin-top: 4px;
}
.item-0 {
  background: $color; 
}

</style>