前言

用于实现不同功能的系统往往需要独特的主题色，本文用于更改elementUI的主题色。

第一种方法

1.安装scss包

npm install --save-dev sass-loader
npm install --save-dev node-sass

查看package.json中的依赖

2.新建一个样式文件

element-variables.scss(该文件位置与下文main.js中引入的位置需要保持一致)
写入以下内容：

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

需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。

引入

之后，在项目的入口文件（main.js或者mian.ts）中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'Vue.use(Element)

第二种方法

ElementUI官网自定义主题颜色（文档）
ElementUI提供的在线主题编辑器

可以通过在线主题编辑器编辑自己需要的主题颜色

然后下载相应的主题包：
style.zip

将这两个文件复制到
node_modules\element-ui\lib\theme-chalk 下替换原有的文件
之后重启服务器就可以更换主题色了。
但是这种情况下如果是要把项目打包在其他设备上打开就会出现问题，因为一般不会将node_modules目录下的东西打包进项目中，而是靠install直接下载相关依赖。

所以我们可以结合第一种和第二种情况

style中还有一个叫config.json的文件，我们可以将其中的颜色参数复制到第一种方法中新建的element-variables.scss文件中，如下图所示

Element UI 改变主题色相关推荐

在vue项目中引入element，并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径. 这里就说一下自己是如何引入UI框架的--vue中引入elementUI.(项目其实早已经开发完了,只是回过头来回顾一下自己当时是 ...
Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色（保姆级教程，简易且标准全局替换主题色）
前言网上的文章可以用乱七八糟来形容了,各种奇葩的引入.安装各种东西,本文提供简洁且符合官方标准的解决方案. Element UI 默认主题色是蓝色,很可能与我们设计稿不一致(比如设计稿是绿色主题), ...
element ui 引入css,element-ui引入方式、自定义主题
1. element-ui组件引入方式: 1)完整引入在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element ...
基于elementui的主题色改变和全网站色彩切换
主题色切换什么是主题色切换,所谓的主题色切换就是我们通过自定义的方式去修改elementUI原有的主题色,以达到我们业务所要使用的多(单)色彩切换. 静态切换 elementui 采用的是scss进 ...
node-sass改dart-sass and 一些七七八八，实现sass主题色修改
sass相关七七八八 dart-sass sass SCSS变量 css变量 SCSS数据类型 !default 插值语句条件语句 @if @for循环 @each循环 @while循环 @impo ...
Element UI（一）
目录一.指南设计原则导航选择合适的导航侧栏导航顶部导航二.开发指南安装 npm 安装 CDN Hello world 快速上手 ¶使用 vue-cli@3 ¶使用 Starter Ki ...
element-ui 整体替换主题色
自定义主题 Element 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式.我们提供了三种方法,可以进行不同程度的样式自定义. ¶仅替换主题色如果仅希望更换 Element ...
elementUi自定义主题色（最简单优雅）
elementUi自定义主题色 Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量: 1.新建一个样 ...
WPF动态改变主题颜色
国内的WPF技术先行者周银辉曾介绍过如何动态改变应用程序的主题样式,今天我们来介绍一种轻量级的改变界面风格的方式--动态改变主题色. 程序允许用户根据自己的喜好来对界面进行配色,这种技术在很多软件中都 ...

Element UI 改变主题色

文章目录

前言

第一种方法

1.安装scss包

2.新建一个样式文件

引入

第二种方法

所以我们可以结合第一种和第二种情况

推荐使用

Element UI 改变主题色相关推荐

最新文章

热门文章