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

目录

• 前言
• CSS样式覆盖 - 最简单粗暴的力工做法
• LESS、SCSS变量覆盖 - 学会使用工具的做法
• CSS变量 - 新款工具的做法
• 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变量看这一篇文章就够了

这个做法和最开始提到的使用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>
    

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

总结 

到此这篇关于vue项目实现一键网站换肤效果的文章就介绍到这了,更多相关vue项目一键网站换肤内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 基于vue的换肤功能的示例代码
• Vue + Scss 动态切换主题颜色实现换肤的示例代码
• Vue项目实现换肤功能的一种方案分析
• vue+iview+less 实现换肤功能
• 使用vue + less 实现简单换肤功能的示例
• Vue中使用sass实现换肤功能
• Vue 换肤的示例实践
• vue实现换肤功能
• 基于Vue结合ElementUI的换肤解决方案

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！