自定义命名空间 2.2.0

提示

我们在 element-plus-vite-starter 中提供了一个示例。 您可以去查看。

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

由于我们使用 sass 编写样式,因此如果要自定义所有命名空间。 我们必须假设您已经在使用 sass。

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

设置 ElConfigProvider

使用 ElConfigProvider 包裹您的根组件。

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

设置 Scss 和 Css 变量

创建 styles/element/index.scss

styles/element/index.scss
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 中进行设置。

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

就这么简单。