plugin.config.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. const ThemeColorReplacer = require('webpack-theme-color-replacer')
  2. const generate = require('@ant-design/colors/lib/generate').default
  3. const getAntdSerials = (color) => {
  4. // 淡化(即less的tint)
  5. const lightens = new Array(9).fill().map((t, i) => {
  6. return ThemeColorReplacer.varyColor.lighten(color, i / 10)
  7. })
  8. const colorPalettes = generate(color)
  9. const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
  10. return lightens.concat(colorPalettes).concat(rgb)
  11. }
  12. const themePluginOption = {
  13. fileName: 'css/theme-colors-[contenthash:8].css',
  14. matchColors: getAntdSerials('#1890ff'), // 主色系列
  15. // 改变样式选择器,解决样式覆盖问题
  16. changeSelector (selector) {
  17. switch (selector) {
  18. case '.ant-calendar-today .ant-calendar-date':
  19. return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
  20. case '.ant-btn:focus,.ant-btn:hover':
  21. return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
  22. case '.ant-btn.active,.ant-btn:active':
  23. return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
  24. case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
  25. case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
  26. return ':not(.ant-steps-item-process)' + selector
  27. // fixed https://github.com/vueComponent/ant-design-vue-pro/issues/876
  28. case '.ant-steps-item-process .ant-steps-item-icon':
  29. return ':not(.ant-steps-item-custom)' + selector
  30. case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
  31. case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
  32. return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
  33. case '.ant-menu-horizontal > .ant-menu-item-selected > a':
  34. case '.ant-menu-horizontal>.ant-menu-item-selected>a':
  35. return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'
  36. case '.ant-menu-horizontal > .ant-menu-item > a:hover':
  37. case '.ant-menu-horizontal>.ant-menu-item>a:hover':
  38. return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'
  39. default :
  40. return selector
  41. }
  42. }
  43. }
  44. const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)
  45. module.exports = createThemeColorReplacerPlugin