After introducing Element Plus on demand in the Vue3 project, the style is lost when using the component.

1 Problem description

After being introduced on demand in the vue3 project according to the official documentation of Element Plus , styles are lost when .vueusing components such as and in the page ElMessage.ElLoading

2 Causes

The on-demand introduction only introduces relevant components, without introducing global styles or introducing component styles on demand.

3 solutions

1. Install unplugin-element-plus

   npm i unplugin-element-plus -D
   

2. vue.config.jsIntroduced and configured in

   // vue.config.js
   const AutoImport = require('unplugin-auto-import/webpack')
   const Components = require('unplugin-vue-components/webpack')
   const {
         
          ElementPlusResolver } = require('unplugin-vue-components/resolvers')
   // 引入unplugin-element-plus
   const ElementPlus = require('unplugin-element-plus/webpack')
   
   module.exports = {
         
         
     chainWebpack: config => {
         
         
       config
         .plugin('html')
         .tap(args => {
         
         
           args[0].title = 'xxx管理后台'
           return args
         })
     },
     configureWebpack: {
         
         
       plugins: [
         AutoImport({
         
         
           resolvers: [ElementPlusResolver()]
         }),
         Components({
         
         
           resolvers: [ElementPlusResolver()]
         }),
         ElementPlus() // 配置unplugin-element-plus
       ]
     }
   }