vite+vue3+tsx下，按照官方的示例修改了主题，不生效

1.vite.config.ts配置

如果用了unplugin-element-plus/vite这个插件

需要增加如下配置 useSource: true

import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig(({ mode }: ConfigEnv) => {
    return {
        ......//其他配置
        plugins: [
            vue(),
            vueJsx(),
            ElementPlus({ useSource: true }),//注意这里要加上
            ......//其他插件
        ],
    }
})

预编译部分的配置如下：注意以下2点

• 需要去掉 as *
• 需要去掉 不能放到src/assets目录下

export default defineConfig(({ mode }: ConfigEnv) => {
    const { IMG_URL, lessAdditionalData, PLATFORM } = getConfig(mode)
    return {
        ......//其他配置
        css: {
            preprocessorOptions: {
                scss: {
                    //additionalData: `@use "~/styles/element/index.scss" as *;`,//原来官方的配置加了as *,加了后打包会报错，需要去掉
                    additionalData: `@use "@/styles/element.scss";`,
                },
            },
            devSourcemap: true,
        },
       
    }
})

我的自定义demo文件

// src\styles\element.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
    $colors: (
        'primary': (
            'base': #006fff,
        ),
        'success': (
            'base': #34c759,
        ),
        'warning': (
            'base': #ff9500,
        ),
        'danger': (
            'base': #ff453a,
        ),
    )
);