本文僅記錄了vue項(xiàng)目中如何使用webpack-theme-color-replacer，其它項(xiàng)目詳情請(qǐng)自行了解。但也希望本文涉及的插件使用對(duì)你有幫助
安裝插件
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文件的顏色數(shù)組（可以傳入多個(gè)顏色值），支持rgb和hsl,也就是換膚改變顏色的變量
matchColors: ['#9564ca'],
//可選.輸出css文件名，支持[contenthash]和[hash]
fileName: 'css/theme-colors-[contenthash:8].css',
// 可選的。將 css 文本注入 js 文件，不再需要下載 `theme-colors-xxx.css`。
injectCss: true,
})
},
}
模板內(nèi)修改顏色：
<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秒后換色了，模擬了用戶點(diǎn)擊一次換膚的過程
setTimeout(() => {
this.changeThemeColor('#69af23');
}, 5000);
},
methods: {
// 設(shè)置css新值，點(diǎn)擊換膚時(shí)候會(huì)獲取到新的顏色值，然后調(diào)用這個(gè)方法就行了
changeThemeColor(newColor) {
// newColors必須是個(gè)數(shù)組形式，數(shù)組長(zhǎng)度一定要和配置中的matchColors長(zhǎng)度一致，否則缺少的顏色就會(huì)出現(xiàn)問題
// sass里的lighten貌似是使用hsl顏色增加亮度。 varyColor.js 里面的lighten、darke其實(shí)是將當(dāng)前顏色與白色進(jìn)行混合，與element-ui的色系一致。
client.changer.changeColor({ newColors: [''+newColor] })
}
},
};
</script>
<style lang="scss" scoped>
// 基礎(chǔ)色
$color: #9564ca;
.item{
height: 30px;
margin-top: 4px;
}
.item-0 {
background: $color;
}
</style>
配置中的注釋很重要！很重要??！很重要！?。≌?qǐng)仔細(xì)閱讀
