Element-UI库定制样式

发表于 | 分类于 | 阅读次数:
探索如何全局修改Element-UI库的样式。

探索如何全局修改Element-UI库的样式。

默认

默认样式下，Element-UI的主题色为鲜艳的蓝色，在没有定制样式的情况下使用还是不错的。

默认情况下，我们执行yarn add element-ui会得到一个同名的依赖，其样式文件存在于element-ui/lib/theme-chalk目录下。

所以不管我们是将组件库全局引入，或者按需引入，都需要指定使用的CSS位于这里。

具体配置方式请查看官方文档-快速开始。

修改局部样式

在使用到这个局部样式的组件文件中以高权值覆盖的形式来修改，若此样式在多个地方被使用，则可以通过给组件添加类的方式，再到通用的样式文件中修改覆盖。

修改主题颜色

编写一个保存自定义样式的文件，例如src/element-variables.scss，在其中以变量的形式来覆盖element-ui中的变量。最后再在main.js中导入这个文件。

1
2
3
4
5
6
7
8
9
10
11
// element-variables.scss

@charset "utf-8";

/* 改变主题色变量 */
$--color-primary: indigo;

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

@import "~element-ui/packages/theme-chalk/src/index"; # 引入样式文件 注意这里是package index是所有样式scss文件的集合。这里通过传入变量，实现样式重置。
1
import '@/element-variables.scss';

修改部分样式

修改全部样式

建议下载使用官方提供的CLI工具。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 安装后获得et命令
$ sudo yarn global add element-theme

# 查看参数配置
$ et -h

Usage: et [options]

Options:
  -V, --version           output the version number
  -i --init [filePath]    init variables file
  -w --watch              watch variable changes then build
  -o --out [outPath]      output path
  -m --minimize           compressed file
  -c --config [filePath]  variables file
  -b --browsers <items>   set browsers
  -h, --help              output usage information

需要用到的命令:

  • et 修改配置后打包，生成主题文件夹
  • et -i 生成element-variables.scss文件，包括所有需要用到的变量。

使用过程

下载element-theme-chalk为开发依赖。

1
$ yarn add element-theme-chalk -D

使用et -i生成element-variables.scss文件，修改需要修改的变量后保存，执行et。

就会看到在根目录下生成了一个theme文件夹。

然后可以将theme/index.css在main.js来导入定制后全部的Element-UI库样式，或者在babel配置文件中，指定babel-plugin-component的styleLibrary为~theme来供组件按需使用的样式导入。

参考资料

官方文档-自定义主题

有钱，任性！！！