커스텀 네임스페이스

커스텀 네임스페이스 (Custom Namespace)

출처: 문서

본문

Custom namespace 2.2.0 ​

TIP element-plus-vite-starter에 예제를 준비해 두었으니 확인해 보세요.

기본 네임스페이스는 el이에요. 특별한 경우 네임스페이스를 커스터마이즈해야 할 수 있는데, 스타일을 sass로 작성하므로 모든 네임스페이스를 커스터마이즈하려면 이미 sass를 사용 중이라고 가정해요. ElConfigProvider와 scss $namespace를 동시에 설정해야 합니다.

ElConfigProvider 설정 ​

루트 컴포넌트를 ElConfigProvider로 감싸 주세요.

App.vue

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

Scss & Css Vars 설정 ​

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.ts에서 styles/element/index.scss를 import 합니다. webpack도 마찬가지로 preprocessorOptions에 설정해야 해요.

vite.config.ts

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

이게 전부예요.

더 알아보기 (Learn more)