When element-plus is imported on demand, the problem of using a custom theme in vite is invalidated

1. Description of the problem generation process:

1) Use vite to create a vue3 project

 2) Install element-plus vue-router axios step by step 

npm i element-plus vue-router axios -S

3) Import element-plus as needed and follow the steps on the official website

Theme | Element Plus

 4) Axios writes ordinary interceptors according to general thinking

import axios from "axios";
import { ElMessage } from 'element-plus'
import "element-plus/es/components/message/style/css"

// 这里打包后，可以修改根目录下的config.js进行修改
axios.defaults.baseURL = Window.apiConfig[process.env.NODE_ENV].baseUrl

// 请求拦截器，内部根据返回值，重新组装，统一管理。
axios.interceptors.response.use(res => {
    const { data } = res;
    if (typeof data !== 'object') {
        ElMessage.error('服务器异常，请联系管理员')
        return Promise.reject(res);
    }
    if (data.code != 200) {
        if (res.data.message)
            ElMessage.error(res.data.message)
        return Promise.reject(res.data);
    }

    return data
}, (err) => {
    ElMessage.error({
        showClose: true,
        message: '服务器异常，请联系管理员',
        type: 'error',
    })
    return Promise.reject(err)
})

5) Write a login test. It stands to reason that the green theme color should be displayed normally here, but it is still blue! ! ! !

 

2. Problem solving process

I found a lot of methods on the Internet, but it didn’t work even if I used the full amount, and I tried it even if the position was wrong, because the blogger has successfully created countless custom themes under webpack before. It’s the first time I use vite, and I think it should be similar. The above writing method is similar to that written in webpack.

It seems that it may not be feasible on the Internet. You have to rely on yourself at the critical time. The problem is that the message box style introduced in axios will overwrite the custom theme.

Some people may ask, what happened to the introduction of this, don't worry, the so-called magic height is one foot, and the road is one foot high, there are two methods here, choose by yourself, and personally suggest automatic introduction

1) First delete the message box component and style manually introduced by axios.js

2) Method 1: Introduce the style of the message box globally in main.js. As for the place where it is used, it still needs to be manually introduced

3) Method 2: Automatically import in vite.config.js configuration

        Install dependencies

npm  i unplugin-auto-import -D

        If the configuration item in vite.config.js

    // 自动引入，注意这里需要在Components之后引入
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
          importStyle: "sass",
        }),
      ],
    }),

3. The following is the entire content of the vite.config.js file

/*
 * @Author: liuxin
 * @Date: 2023-03-20 14:32:35
 * @LastEditors: liuxin
 * @LastEditTime: 2023-03-20 18:02:20
 * @Description: 
 */
import path from "path";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": `${path.resolve(__dirname, "src")}`,
    },
  },
  css: {
    // 全局引入自定义的主题包，以及一些自用函数和自用变量
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/elementplus.scss" as *;@use "@/styles/mixins.scss" as *;@use "@/styles/variable.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    //按需引入element
    Components({
      resolvers: [
        ElementPlusResolver({
          // 按需引入修改主题色添加这一行，使用预处理样式
          importStyle: "sass",
        }),
      ],
    }),
    // 自动引入，注意这里需要在Components之后引入
    AutoImport({
      resolvers: [
        ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
          importStyle: "sass",
        }),
      ],
    }),
  ],
})