自定义命名空间 2.2.0 ​

默认的命名空间是 el。在某些特殊情况下，我们可能需要自定义命名空间。

因为我们使用 sass 编写样式，所以如果您想自定义所有命名空间。我们必须假设您已经在使用 sass。

您必须同时设置 ElConfigProvider 和 scss $namespace。

设置 ElConfigProvider ​

使用 ElConfigProvider 包装您的根组件。

<template>
  <el-config-provider namespace="ep">
    <!-- ... -->
  </el-config-provider>
</template>

设置 Scss 和 Css 变量 ​

创建 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.ts 中引入 styles/element/index.scss

对于 webpack 也是如此，需要在 preprocessorOptions 中进行设置。

import { defineConfig } from 'vite'
// https://vite.org.cn/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  // ...
})

就这些。