一、原理
本地存放多套主题,两者有不同的命名空间,如写两套主题,一套叫day theme
,一套叫night theme
,night theme
主题都在一个.night-theme
的命名空间下,我们动态的在body
上add .night-theme
, remove .night-theme
。
二、实现
1、安装工具
npm i element-theme -g
下载官方通过的 Theme generator ,一个专门用来生成Element
主题的工具。按照文档,我们生成了需要的主题。
2、安装白垩主题
# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D
3、初始化变量文件
主题生成工具安装成功后,如果全局安装可以在命令行里通过 et调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et
访问到命令。执行 -i
初始化变量文件。默认输出到 element-variables.scss
,当然你可以传参数指定文件输出目录。
et -i [可以自定义变量文件]
4、修改变量
直接编辑 element-variables.scss
文件,例如修改主题色为红色。
$--color-primary: red;
5、编译主题
保存文件后,到命令行里执行 et
编译主题,如果你想启用 watch
模式,实时编译主题,增加 -w
参数;如果你在初始化时指定了自定义变量文件,则需要增加 -c
参数,并带上你的变量文件名。默认情况下编译的主题目录是放在 ./theme
下,你可以通过 -o
参数指定打包目录。
e