vue3自定义element-plus主题色

最新推荐文章于 2025-11-04 10:53:01 发布

原创最新推荐文章于 2025-11-04 10:53:01 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

vue 专栏收录该内容

15 篇文章

订阅专栏

第一步：创建一个scss文件，用于存放自定义颜色值；

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss'with ($colors: ('white': #ffffff,
    'black': #000000,
    'primary': ('base': #0f87ff,
    ),
    'success': ('base': #67c23a,
    ),
    'warning': ('base': #e6a23c,
    ),
    'danger': ('base': #f56c6c,
    ),
    'error': ('base': #f56c6c,
    ),
    'info': ('base': #909399,
    ),
  ),
)

第二步：在vite.config.js进行相关配置；

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
	return {
		 resolve: {
	      alias: {
	        '~': path.resolve(__dirname, './'),
	        '@': path.resolve(__dirname, 'src')
	      },
	      css: {
		      // CSS 预处理器
		      preprocessorOptions: {
		        // 覆盖掉element-plus包中的主题变量文件
		        scss: {
		          additionalData: `@use "src/styles/element/index.scss" as *;`,
		        }
		      }
		    },
	    },
	}
})