Vue网站换肤不再难！webpack-theme-color-replacer教你轻松搞定！

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

安装插件

npm i -D webpack-theme-color-replacer

Copy

文中版本 "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, 
        })
    },
}

Copy

模板内修改颜色：

<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>

Copy

配置中的注释很重要！很重要！！很重要！！！请仔细阅读