diff --git a/package.json b/package.json index 17ad31ed34..10ac546f0f 100644 --- a/package.json +++ b/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.15" }, "eslintConfig": { "root": true, diff --git a/src/components/SettingDrawer/themeColor.js b/src/components/SettingDrawer/themeColor.js index 7349b7b8ab..6e7b480b5c 100644 --- a/src/components/SettingDrawer/themeColor.js +++ b/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', // TODO 需要处理的暗坑 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', // TODO 需要处理的暗坑 - 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) } } diff --git a/vue.config.js b/vue.config.js index 677acc347e..83813c492e 100644 --- a/vue.config.js +++ b/vue.config.js @@ -16,7 +16,7 @@ module.exports = { // 生成仅包含颜色的替换样式(主题色等) // TODO 需要增加根据环境不开启主题需求 new ThemeColorReplacer({ - fileName: 'css/theme-colors.css', // TODO 需要处理的暗坑 + fileName: 'css/theme-colors-[contenthash:8].css', matchColors: getAntdSerials('#1890ff'), // 主色系列 // 改变样式选择器,解决样式覆盖问题 changeSelector (selector) {