目录
大家好
在Element官网中，提供了四种方法来对样式进行自定义：
- 主题编辑器
- 仅替换主题色
- 在项目中改变SCSS变量
- 命令行主题工具
本文将按照官网的描述，介绍如何在使用了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;
}
}这样就大功告成啦~
五、既然可以直接修改样式，为什么还要覆盖变量
像主题色之类的样式，组件之间是共用的。只改变一个组件中的主题色样式，会与其他组件的颜色主题不一致，产生违和感。
这其实就是变量的优点，可复用。而且变量名包含语义，读起来也更容易理解，方便维护。
以上就是本文的全部内容啦，本人能力有限，如果记述有误，还请您留言指出，感谢谅解和支持，欢迎留言评论！