You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.6 KiB
82 lines
2.6 KiB
/** |
|
* 【样式按需加载插件 ——主要处理antd的样式】 |
|
* Introduces component library styles on demand. |
|
* https://github.com/anncwb/vite-plugin-style-import |
|
*/ |
|
import { createStyleImportPlugin } from 'vite-plugin-style-import'; |
|
|
|
export function configStyleImportPlugin(_isBuild: boolean) { |
|
if (!_isBuild) { |
|
return []; |
|
} |
|
const styleImportPlugin = createStyleImportPlugin({ |
|
libs: [ |
|
{ |
|
libraryName: 'ant-design-vue', |
|
esModule: true, |
|
resolveStyle: (name) => { |
|
// 这里是无需额外引入样式文件的“子组件”列表 |
|
const ignoreList = [ |
|
'anchor-link', |
|
'sub-menu', |
|
'menu-item', |
|
'menu-divider', |
|
'menu-item-group', |
|
'breadcrumb-item', |
|
'breadcrumb-separator', |
|
'form-item', |
|
'step', |
|
'select-option', |
|
'select-opt-group', |
|
'card-grid', |
|
'card-meta', |
|
'collapse-panel', |
|
'descriptions-item', |
|
'list-item', |
|
'list-item-meta', |
|
'table-column', |
|
'table-column-group', |
|
'tab-pane', |
|
'tab-content', |
|
'timeline-item', |
|
'tree-node', |
|
'skeleton-input', |
|
'skeleton-avatar', |
|
'skeleton-title', |
|
'skeleton-paragraph', |
|
'skeleton-image', |
|
'skeleton-button', |
|
]; |
|
// 这里是需要额外引入样式的子组件列表 |
|
// 单独引入子组件时需引入组件样式，否则会在打包后导致子组件样式丢失 |
|
const replaceList = { |
|
'typography-text': 'typography', |
|
'typography-title': 'typography', |
|
'typography-paragraph': 'typography', |
|
'typography-link': 'typography', |
|
'dropdown-button': 'dropdown', |
|
'input-password': 'input', |
|
'input-search': 'input', |
|
'input-group': 'input', |
|
'radio-group': 'radio', |
|
'checkbox-group': 'checkbox', |
|
'layout-sider': 'layout', |
|
'layout-content': 'layout', |
|
'layout-footer': 'layout', |
|
'layout-header': 'layout', |
|
'month-picker': 'date-picker', |
|
'range-picker': 'date-picker', |
|
'image-preview-group': 'image', |
|
}; |
|
|
|
return ignoreList.includes(name) |
|
? '' |
|
: replaceList.hasOwnProperty(name) |
|
? `ant-design-vue/es/${replaceList[name]}/style/index` |
|
: `ant-design-vue/es/${name}/style/index`; |
|
}, |
|
}, |
|
], |
|
}); |
|
return styleImportPlugin; |
|
}
|
|
|