在使用vite之后element-plus按需引入用了插件unplugin-vue-components,其中有些问题记录一下。
在使用Elmessage等写在js文件中的反馈提示消息的组件消息时插件识别不到css文件,就会出现如下效果
这时就需要在main.ts中手动引入你所需要的css文件如
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message-box.css';
import 'element-plus/theme-chalk/el-message.css';
如果图省事把css文件全部引入就是这样
import 'element-plus/dist/index.css'
不过既然都按需引入了,优雅就优雅到底,尽量别全部引入,引入成功elmessage的效果应该是这样
也许之后 unplugin-vue-components插件会更新修复这个bug,但如果没修复就暂时这样把.......
虽然在main.ts中引入可以解决,但背离了我们自动导入的初衷,所以推荐下面这种方式
npm add vite-plugin-style-import consola -D
// 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`
},
},
]
}),
],
}
这样配置后 我们就不用在mian.js中手动导入ElMessage与ElLoading的样式了