优化并解决主题色替换问题

Author: hzsrc

package.json

@@ -57,7 +57,7 @@
     "opencollective-postinstall": "^2.0.2",
     "vue-svg-icon-loader": "^2.1.1",
     "vue-template-compiler": "^2.5.22",
-    "webpack-theme-color-replacer": "^1.1.5"
+    "webpack-theme-color-replacer": "^1.2.13"
   },
   "eslintConfig": {
     "root": true,

src/components/SettingDrawer/themeColor.js

@@ -2,7 +2,6 @@ import client from 'webpack-theme-color-replacer/client'
 import generate from '@ant-design/colors/lib/generate'
 
 export default {
-  primaryColor: '#1890ff',
   getAntdSerials (color) {
     // 淡化（即less的tint）
     const lightens = new Array(9).fill().map((t, i) => {
@@ -13,14 +12,12 @@ export default {
     return lightens.concat(colorPalettes)
   },
   changeColor (newColor) {
-    var lastColor = this.lastColor || this.primaryColor
     var options = {
-      cssUrl: '/css/theme-colors.css',
-      oldColors: this.getAntdSerials(lastColor), // current colors array. The same as `matchColors`
-      newColors: this.getAntdSerials(newColor) // new colors array, one-to-one corresponde with `oldColors`
+      newColors: this.getAntdSerials(newColor), // new colors array, one-to-one corresponde with `matchColors`
+      changeUrl (cssUrl) {
+        return `/${cssUrl}` // while router is not `hash` mode, it needs absolute path
+      }
     }
-    var promise = client.changer.changeColor(options, Promise)
-    this.lastColor = lastColor
-    return promise
+    return client.changer.changeColor(options, Promise)
   }
 }

vue.config.js

@@ -29,7 +29,7 @@ module.exports = {
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       // 生成仅包含颜色的替换样式（主题色等）
       new ThemeColorReplacer({
-        fileName: 'css/theme-colors.css',
+        fileName: 'css/theme-colors-[contenthash:8].css',
         matchColors: getAntdSerials('#1890ff'), // 主色系列
         // 改变样式选择器，解决样式覆盖问题
         changeSelector (selector) {