vite-plugin-imp 自动加载组件样式
一个自动导入组件库样式的vite插件。
安装
npm i vite-plugin-imp -D
or
yarn add vite-plugin-imp -D
使用
import { defineConfig } from 'vite'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
plugins: [vitePluginImp(config)]
})
config
的类型约束为 ImpConfig
interface libItem {
// library name
libName: string
// component style file path
style: (name: string) => string
// default `es`
libDirectory?: string
}
interface ImpConfig {
libList: libItem[]
}
一个引入vant
和element-plus
的vite配置:
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
plugins: [
vue(),
vitePluginImp({
libList: [
{
libName: 'vant',
style(name) {
return `vant/es/${name}/index.css`
}
},
{
libName: 'element-plus',
style: (name) => {
return`element-plus/lib/theme-chalk/el-${name.slice(2)}.css`
}
}
]
})
]
})
只需使用如下所示的组件,组件样式就会自动注入。
import { defineComponent } from 'vue'
import { Progress } from 'vant'
import { ElButton } from 'element-plus'
export default defineComponent({
setup() {
return () => {
return (
<div> <Progress percentage={3} /> <ElButton>element-plus button</ElButton> </div>
)
}
}
})
vite 1.x 使用方法如下
// vite.config.js
const vitePluginImpCreator = require('vite-plugin-imp')
const vitePluginImp = vitePluginImpCreator({
optimize: true,
libList: [
{
libraryName: 'vant',
style: (name) => {
return `vant/es/${name}/index.css`
}
},
{
libraryName: 'element-plus',
style: (name) => {
return`element-plus/lib/theme-chalk/el-${name.slice(2)}.css`
}
}
]
})
module.exports = {
plugins: [vitePluginImp]
}
今天的文章[vite-plugin-imp] 一个自动导入组件库样式的vite插件分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20164.html