Vue3 自定义主题不生效问题 element-plus-vite-starter-main

项目场景：

Vue3 Vite Element UI plus 【element-plus-vite-starter-main】

官方推荐自定义主题的项目地址：element-plus-vite-starter-main

---

问题描述

根据官方推荐的开源的element-plus-vite-starter-main，无法生效自定义主题

main.js:

import {createApp} from 'vue'
import App from '@/App.vue'

import router from "@/router/index.js";
import 'uno.css'

import ElementPlus from "element-plus";
// import 'element-plus/dist/index.css';

import "element-plus/theme-chalk/src/message.scss"

const app = createApp(App)

app.use(router)
app.use(ElementPlus)

app.mount('#app')

vite.config.js:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

import Components from 'unplugin-vue-components/vite'
import Unocss from 'unocss/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import {presetUno, presetAttributify, presetIcons} from 'unocss'

const path_src = path.resolve(__dirname, 'src')

export default defineConfig({
    plugins: [vue(),
    //我这里使用的unplugin-vue-components
        Components({
            dirs: ['src/components'],
            include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
            resolvers: [
                ElementPlusResolver({
                    importStyle: 'sass'
                })
            ],
            dts: 'src/components.d.ts'
        }),
        Unocss({
            presets: [
                presetUno(),
                presetAttributify(),
                presetIcons({
                    scale: 1.2,
                    warn: true,
                })
            ],
            rules: [
                ['c-p', {
                    cursor: 'pointer'
                }],
                ['flex', {
                    display: 'flex'
                }]
            ]
        })
    ],
    resolve: {
        alias: {
            '@': `${path_src}`
        }
    },
    css: {
        preprocessorOptions: {
            scss: {
            //引入样式 重点
                additionalData: '@use "@/styles/element/index.scss" as *;'
            }
        }
    }
})

复制的样式文件：

解决方案：

按理来说，这样不应该不会有效果，在网上搜索解决方案无果后，我开始研究复制过来的代码，我发现了这样一段代码…

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"
);

我想，我已经知道了问题出在哪里了，CV侠不好做呀…

// we can add this to custom namespace, default is ‘el’
//我们可以将其添加到自定义命名空间，默认为’el’

我在template里写的是el-… 当然会不生效

解决方案 可以直接将这段代码直接带走，或者使用<ep-button…/>

效果图🛫️