Element Plus 修改主题色

2025年8月7日 • ☕️ 1 min read

1.新建修改覆盖主题色的 scss 文件

/* ～/assets/styles/element.scss */
/* just override what you need */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
	$colors: (
		'primary': (
			'base': #1e4cf5
		)
	)
);

2.修改 nuxt.config.ts 配置

export default defineNuxtConfig({
	...
	vite: {
		css: {
			preprocessorOptions: {
                scss: {
                    additionalData: `@use "~/assets/styles/element.scss";`,
                }
            }
		}
	},
	...
	elementPlus: {
        importStyle: 'scss',
    },
	...
})