如何将element自定义主题色改写为一个长尾词？

本文共计340个文字，预计阅读时间需要2分钟。

修改Element主题色，提供以下两种方法：

1. 在项目中修改SCSS变量： - 如果你的项目也使用了SCSS编写，可以直接修改Element的`theme-chalk`中的SCSS变量。 - 修改方法如下：找到并修改SCSS文件中的主题色变量，例如`$--color-primary`。

2. 使用Element提供的主题色覆盖方法： - 在项目中引入Element的CSS文件后，再引入一个自定义的CSS文件，在其中覆盖Element的主题色变量。 - 自定义CSS文件内容如下：`@import ~element-ui/packages/theme-chalk/src/index;` 后面添加你的主题色变量覆盖。

修改element的主题色提供以下两种方法1.在项目中改变SCSS变量Element的theme-chalk使用SCSS编写如果你的项目也使用了

修改element的主题色提供以下两种方法

1.在项目中改变 SCSS 变量

Element 的 theme-chalk 使用 SCSS 编写如果你的项目也使用了 SCSS那么可以直接在项目中改变 Element 的样式变量

新建一个样式文件例如 element-variables.scss写入以下内容

/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量必需 */$--font-path: ~element-ui/lib/theme-chalk/fonts;import "~element-ui/packages/theme-chalk/src/index";

之后在项目的入口文件中直接引入以上样式文件即可无需引入 Element 编译好的 CSS 文件

import Vue from vueimport Element from element-uiimport ./element-variables.scssVue.use(Element)

2.使用在线主题生成工具

地址elementui.github.io/theme-chalk-preview/

下载主题包之后放入项目

在main.js中引入即可

import ./theme/index.css