利用[webpack-theme-color-replacer](https://link.segmentfault.com/?url=https%3A%2F%2Fgithub.com%2Fhzsrc%2Fwebpack-theme-color-replacer)插件，為[ant-design](https://link.segmentfault.com/?url=https%3A%2F%2Fgithub.com%2Fant-design%2Fant-design)實現在運行時動態切換主題色的功能，無需在頁面進行less的編譯，提升切換速度
利用[webpack-theme-color-replacer](https://github.com/hzsrc/webpack-theme-color-replacer)插件，在webpack構建時提取css中含有主題色的樣式規則，生成一個css/theme-colors.css文件。然后在網頁運行時，下載這個css文件，動態替換其中的顏色為自定義主題色。
*****
**安裝**
`npm i -D webpack-theme-color-replacer`
**引入插件，修改配置**
```
constThemeColorReplacer\=require("webpack-theme-color-replacer");
const?{?getThemeColors,modifyVars?}?\=require("./src/utils/themeUtil");
module.exports\={
configureWebpack:config\=>{
config.plugins.push(
newThemeColorReplacer({
fileName:"css/theme-colors-\[contenthash:8\].css",
matchColors:getThemeColors(),
injectCss:true
})
);
},
css:{
loaderOptions:{
less:{
lessOptions:{
modifyVars:modifyVars(),
javascriptEnabled:true
}
}
}
}
}
```
utils目錄下新增colors.js和themeUtil.js兩個文件
color.js
```
//?螞蟻設計的調色板計算器
const?{?generate?}?\=require("@ant-design/colors");
//?獲取?ant?design?色系
functiongetAntdColors(color){
return generate(color);
}
//?獲取切換色系
functiongetThemeToggleColors(color){
//?主色系
constmainColors\=getAntdColors(color);
constprimary\=mainColors\[10\];
return {primary,mainColors};
}
module.exports\={
getAntdColors,
getThemeToggleColors
};
```
themeUtil.js
```
constclient\=require("webpack-theme-color-replacer/client");
const?{?getThemeToggleColors,getAntdColors?}?\=require("./colors.js");
functiongetThemeColors(color){
const\_color\=color;
constreplaceColors\=getThemeToggleColors(\_color);
constthemeColors\=\[...replaceColors.mainColors\];
return themeColors;
}
//?調用插件內的方法
functionchangeThemeColor(newColor){
letpromise\=client.changer.changeColor({newColors:getThemeColors(newColor)});
return promise;
}
functionmodifyVars(color){
let _color = color;
const palettes=getAntdColors(\_color);
const primary=palettes\[5\];
return{
"primary-color":primary,
"primary-1":palettes\[0\],
"primary-2":palettes\[1\],
"primary-3":palettes\[2\],
"primary-4":palettes\[3\],
"primary-5":palettes\[4\],
"primary-6":palettes\[5\],
"primary-7":palettes\[6\],
"primary-8":palettes\[7\],
"primary-9":palettes\[8\],
"primary-10":palettes\[9\],
"info-color":primary,
"alert-info-bg-color":palettes\[0\],
"alert-info-border-color":palettes\[2\],
"processing-color":primary
};
}
module.exports\={
getThemeColors,
changeThemeColor,
modifyVars
};
```
