有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

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

vue cat 4个月前 (06-12) 39次浏览 已收录 0个评论 扫描二维码

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

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

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

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

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

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

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

[学会css变量看这一篇文章就够了](https://www.paozha.net/875.html "学会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>
配置中的注释很重要!很重要!!很重要!!!请仔细阅读
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址