vite-plugin-style-import是一款Vite插件,它可以帮助我们在使用element-plus组件库时,自动引入组件的样式。下面是具体的操作步骤:
1.安装vite-plugin-style-import
npm install vite-plugin-style-import -D
2.在vite.config.js中添加插件配置
// vite.config.ts
import {
createStyleImportPlugin,
ElementPlusResolve
} from 'vite-plugin-style-import'
export default {
plugins: [
createStyleImportPlugin({
resolves: [ElementPlusResolve()],
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name: string) => {
return `element-plus/theme-chalk/${name}.css`
}
}
]
})
]
};
3.安装consola
配置完后会有一个缺少模块的报错Cannot find module 'consola' ,按照提示进行安装
npm install consola -D
当我们在组件中使用ElButton
时,插件会自动引入element-plus
的样式文件,无需手动引入。