前言

現在看不少網站都有一鍵換膚的效果，這東西要說簡單有簡單的做法，要說復雜有復雜的做法，看到ant design pro 源碼使用了webpack-theme-color-replacer插件，就了解一下，記錄下學習過程。

本文主要記錄 webpack-theme-color-replacer插件的使用

CSS樣式覆蓋 - 最簡單粗暴的力工做法

相信不少人都跟我曾經的做法一樣，換膚還不簡單，直接用css優(yōu)先級的原來，進行css樣式覆蓋，簡單粗暴一把梭，但是帶來的問題就是，樣式管理起來麻煩，不管是查找還是修改，都令人頭疼，而且如果需要多套皮膚，還需要提前生成多套css，造成文件越來越大。應急或者力工優(yōu)先選擇。

LESS、SCSS變量覆蓋 - 學會使用工具的做法

現在的項目也都使用預編譯語言，所以變量也很常見了，使用變量也可以達到換膚的效果，也比css樣式覆蓋的做法，高級了很多，但是仔細一想，如果存在多套皮膚，最終的css文件還是會大大增加。這時我又想到了css的變量，請繼續(xù)看后面。

CSS變量 - 新款工具的做法

什么？你還不了解css變量？那就看看這篇文章吧。

學會css變量看這一篇文章就夠了

這個做法和最開始提到的使用css樣式覆蓋還是有點區(qū)別的，這個是用了變量，使用js重新給變量賦值，即可達到換膚的效果，所以還是高級了不少，應該也可以滿足大部分的需求了。可是仔細一想，如果項目要求兼容各種古老瀏覽器，這個做法可能就不行了，至少現在還不是很好。

webpack-theme-color-replacer插件 - 令人驚嘆的做法

直到我在查看ant design pro 源碼的時候，發(fā)項目里使用了webpack-theme-color-replacer插件，看到作者實現功能的思路，感覺是我想學習的做法。

基本思路就是，webpack構建時，在emit事件（準備寫入dist結果文件時）中，將即將生成的所有css文件的內容中 帶有指定顏色的css規(guī)則單獨提取出來，再合并為一個theme-colors.css輸出文件。然后在切換主題色時，下載這個文件，并替換為需要的顏色，應用到頁面上。這樣，下載的樣式中就只包含顏色相關的css規(guī)則，文件較??；同時它已經包含了項目中所有的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項目一鍵網站換膚內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！