【ElementUI】通过改变SCSS变量修改ElementUI样式

目录

一、创建覆盖ElementUI样式的文件

二、在项目入口文件中引入上记文件

三、覆盖ElementUI的样式变量

四、如何修改变量以外的样式

五、既然可以直接修改样式，为什么还要覆盖变量

---

 

大家好

 

在Element官网中，提供了四种方法来对样式进行自定义：

1. 主题编辑器
2. 仅替换主题色
3. 在项目中改变SCSS变量
4. 命令行主题工具

 

本文将按照官网的描述，介绍如何在使用了SCSS的项目中，通过改变SCSS变量修改ElementUI样式，并在此基础上给出示例和补充。

 

一、创建覆盖ElementUI样式的文件

Element 的 theme-chalk 使用 SCSS 编写，我们可以直接在项目中改变 Element 的样式变量。

首先，我们新建一个样式文件，例如 element-variables.scss，用来覆盖ElementUI的样式。（在本文示例中，该文件创建在src根目录）

 

以下是该文件的基本代码：

// element-variables.scss

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

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

上记代码中，我们还没有添加我们想要覆盖的样式。

其中的$--font-path是字体路径变量，是必须进行覆盖的，将其赋值为 Element 中 icon 图标所在的相对路径即可。

"~element-ui/packages/theme-chalk/src/index"是ElementUI的SCSS文件，文件的内容是引用各个组件的SCSS文件。所以如果我们是按需引入组件，此处也可以只引入对应组件的SCSS文件。

关于“~”的用法：URL中“~”后的内容会作为一个模块请求被解析，可以参考VUE-CLI的文档 https://cli.vuejs.org/zh/guide/html-and-static-assets.html#url-%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99。

 

二、在项目入口文件中引入上记文件

然后，为了在项目中应用上记文件，我们需要在入口文件中引用，代码如下：

// main.js

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

Vue.use(Element)

到此为止，我们在样式文件的修改就可以反映在项目中啦。

 

三、覆盖ElementUI的样式变量

ElementUI预置了一些样式变量，我们可以查看想要修改的组件的样式文件，也可以通过Element的在线工具（https://element.eleme.io/#/zh-CN/theme/preview）了解可以修改哪些变量。

最后，我们来覆盖ElementUI的样式变量。以修改按钮的样式为例：

ElementUI的按钮提供了多种大小，如果在项目中经常使用某一种大小的按钮，我们一般会在Vue安装Element时进行设定。比如我们使用超小按钮：

// main.js

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

Vue.use(ElementUI, {size: 'mini'})

我们来看看这个超小按钮的样子吧：

<!-- index.vue -->
<template>
  <div>
    <el-button>ボタン</el-button>
  </div>
</template>

 

可有时候，我们觉得超小型按钮也有点太大了，我们想调整按钮的大小。于是我们可以覆盖下记两个变量：

// element-variables.scss

/* 改变 超小按钮 的大小 */
$--button-mini-padding-vertical: 3px; // 纵向内边距 原始为7px
$--button-mini-padding-horizontal: 7px; // 横向内边距 原始为15px

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

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

现在我们再来看这个按钮，是不是比原来还要小啦

 

四、如何修改变量以外的样式

有的时候，只通过修改变量，并不能完全满足我们的需求。一些组件的样式，并未使用SCSS变量。遇到这种情况，我们可以选择覆盖Element的Class。

以下是一个单独修改卡片标题高度的例子：

<!-- index.vue -->
<template>
  <div>
    <el-card header="カード">内容</el-card>
  </div>
</template>

我们来修改影响标题高度的样式：

// element-variables.scss


/* 改变 超小按钮 的大小 */
$--button-mini-padding-vertical: 3px; // 纵向内边距 原始为7px
$--button-mini-padding-horizontal: 7px; // 横向内边距 原始为15px

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

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

// 修改卡片样式
.el-card {
  .el-card__header {
    padding: 6px 18px; // 卡片标题内边距 原始为18px 20px;
  }
}

这样就大功告成啦~

 

五、既然可以直接修改样式，为什么还要覆盖变量

像主题色之类的样式，组件之间是共用的。只改变一个组件中的主题色样式，会与其他组件的颜色主题不一致，产生违和感。

这其实就是变量的优点，可复用。而且变量名包含语义，读起来也更容易理解，方便维护。

 

 

以上就是本文的全部内容啦，本人能力有限，如果记述有误，还请您留言指出，感谢谅解和支持，欢迎留言评论！