vue 中改变 element-ui 的主题色

Hzzzz_zzzzz

于 2019-12-06 16:48:20 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Zoey_J/article/details/103425905

本文介绍如何通过修改SCSS文件来定制Element UI的主题颜色。首先，新建一个SCSS文件并设置主题色变量，如$--color-primary。接着，更改icon字体路径变量为Element UI的默认路径。最后，在main.js中引入此SCSS文件即可实现主题颜色的更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：项目安装过 scss，并可以使用scss
安装并使用 scss 的方法

1、新建一个 .scss 文件，并在里面设置想要的主题色

/* 改变主题色变量 */
$--color-primary: #4A7CCD;  // 想要的颜色

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

在这里插入图片描述

2、将改文件在 main.js 中引入

在这里插入图片描述