自定义命名空间

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

设置 qlConfigProvider

 <ql-config-provider
    namespace="qin"
    el-namespace="ep"
  >
    <router-view />
  </ql-config-provider>

设置 SCSS 和 CSS 变量

创建 styles/element/index.scss：

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

@forward 'qin-lantern/dist/styles/mixins/config.scss' with (
  $ql-namespace: 'qin',
  $el-namespace: 'ep' // 一些组件中会统一element-plus样式，所以需要单独设置el的命名空间
);

在 vite.config.ts 中导入 styles/element/index.scss：

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