vite Element-plus按需引入el-loading el-message message-box不显示

在使用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的样式了