styleImport.ts 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /**
  2. * Introduces component library styles on demand.
  3. * https://github.com/anncwb/vite-plugin-style-import
  4. */
  5. import { createStyleImportPlugin } from 'vite-plugin-style-import';
  6. export function configStyleImportPlugin(_isBuild: boolean) {
  7. // if (!isBuild) {
  8. // return [];
  9. // }
  10. const styleImportPlugin = createStyleImportPlugin({
  11. libs: [
  12. {
  13. libraryName: 'ant-design-vue',
  14. esModule: true,
  15. resolveStyle: (name) => {
  16. // 这里是无需额外引入样式文件的“子组件”列表
  17. const ignoreList = [
  18. 'anchor-link',
  19. 'sub-menu',
  20. 'menu-item',
  21. 'menu-divider',
  22. 'menu-item-group',
  23. 'breadcrumb-item',
  24. 'breadcrumb-separator',
  25. 'form-item',
  26. 'step',
  27. 'select-option',
  28. 'select-opt-group',
  29. 'card-grid',
  30. 'card-meta',
  31. 'collapse-panel',
  32. 'descriptions-item',
  33. 'list-item',
  34. 'list-item-meta',
  35. 'table-column',
  36. 'table-column-group',
  37. 'tab-pane',
  38. 'tab-content',
  39. 'timeline-item',
  40. 'tree-node',
  41. 'skeleton-input',
  42. 'skeleton-avatar',
  43. 'skeleton-title',
  44. 'skeleton-paragraph',
  45. 'skeleton-image',
  46. 'skeleton-button',
  47. ];
  48. // 这里是需要额外引入样式的子组件列表
  49. // 单独引入子组件时需引入组件样式,否则会在打包后导致子组件样式丢失
  50. const replaceList = {
  51. 'typography-text': 'typography',
  52. 'typography-title': 'typography',
  53. 'typography-paragraph': 'typography',
  54. 'typography-link': 'typography',
  55. 'dropdown-button': 'dropdown',
  56. 'input-password': 'input',
  57. 'input-search': 'input',
  58. 'input-group': 'input',
  59. 'radio-group': 'radio',
  60. 'checkbox-group': 'checkbox',
  61. 'layout-sider': 'layout',
  62. 'layout-content': 'layout',
  63. 'layout-footer': 'layout',
  64. 'layout-header': 'layout',
  65. 'month-picker': 'date-picker',
  66. 'range-picker': 'date-picker',
  67. 'image-preview-group': 'image',
  68. };
  69. return ignoreList.includes(name)
  70. ? ''
  71. : replaceList.hasOwnProperty(name)
  72. ? `ant-design-vue/es/${replaceList[name]}/style/index`
  73. : `ant-design-vue/es/${name}/style/index`;
  74. },
  75. },
  76. ],
  77. });
  78. return styleImportPlugin;
  79. }