解决element-plus 自定义命名空间后部分组件未生效的问题

首先创建一个scss样式表：styles/element/index.scss，命名空间名字可以随便写，偷懒的话可以从官网一模一样拷过来用就行了。

// styles/element/index.scss
// we can add this to custom namespace, default is 'el'
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);
// ...

第二步，配置vite.config中的css部分

import { defineConfig } from 'vite'
import sass from 'sass'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`,
        // @use "@/styles/yyy.scss" as *; 如果有多个接上面的字符继续use下去就行了
        implementation: sass
      },
    },
  },
  // ...
})

第三步，也是最重要的一步，在main.js中定义命名空间，和第一步时对上就行了。官网上写的用<el-config-provider namespace="ep">的方法试过了，因为是局部更改，所以部分组件像messag-box的命名是不生效的

import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css' // 注释此行
import 'element-plus/theme-chalk/src/index.scss' // 改用命名更新后的样式表

const app = createApp(App)
app.use(ElementPlus, {
  namespace: 'ep',
  locale: zhCn
})