mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
70 lines
1.4 KiB
Markdown
70 lines
1.4 KiB
Markdown
---
|
|
title: Custom Namespace
|
|
lang: en-US
|
|
---
|
|
|
|
## Custom namespace <VersionTag version="2.2.0" />
|
|
|
|
:::tip
|
|
|
|
We provide a example in [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter).
|
|
Just check it.
|
|
|
|
:::
|
|
|
|
Default namespace is `el`.
|
|
In special cases, we may need to customize its namespace.
|
|
|
|
Since we use sass to write styles, if you want to customize all namespaces.
|
|
We have to assume that you already use sass.
|
|
|
|
You must set `ElConfigProvider` and scss `$namespace` at the same time.
|
|
|
|
### Set `ElConfigProvider`
|
|
|
|
Use `ElConfigProvider` wrap your root component.
|
|
|
|
```vue
|
|
<!-- App.vue -->
|
|
<template>
|
|
<el-config-provider namespace="ep">
|
|
<!-- ... -->
|
|
</el-config-provider>
|
|
</template>
|
|
```
|
|
|
|
### Set Scss & Css Vars
|
|
|
|
Create `styles/element/index.scss`:
|
|
|
|
```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'
|
|
);
|
|
// ...
|
|
```
|
|
|
|
Import `styles/element/index.scss` in `vite.config.ts`:
|
|
|
|
> The same is true for webpack, which needs to be set in `preprocessorOptions`.
|
|
|
|
```ts
|
|
import { defineConfig } from 'vite'
|
|
// https://vitejs.dev/config/
|
|
export default defineConfig({
|
|
// ...
|
|
css: {
|
|
preprocessorOptions: {
|
|
scss: {
|
|
additionalData: `@use "~/styles/element/index.scss" as *;`,
|
|
},
|
|
},
|
|
},
|
|
// ...
|
|
})
|
|
```
|
|
|
|
That's all.
|