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.
83 lines
2.6 KiB
83 lines
2.6 KiB
3 years ago
|
/**
|
||
|
|
* 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 = {
|
||
|
|
textarea: 'input',
|
||
|
|
'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
|
||
|
|
}
|