一、基础篇(只是修改当前的主题,项目中只有一个主题的情况下使用)
1、进入项目文件夹 cd ‘文件夹名称’
2、全局安装主题生成工具
npm install element-theme -g
3、在项目中安装chalk主题
npm install element-chalk -D
4、初始化变量
et -i
初始化成功之后,会在根目录下生成 element-variables.scss 文件
5、打开文件,根据项目要求进行修改
比如:修改主题色
修改input的hover/focus的边框颜色
6、修改完成之后,开始编译主题
et
显示如下内容,即编译成功,并且会在根目录下生成theme文件夹
7、在main.js里面引入编译过的index.css
import '../theme/index.css'
注意:
自定义的css文件需要放在原先引入的"element-ui/lib/theme-chalk/index.css"文件后面,或者把原文件注释,如上图
二、进阶篇(适合少量主题色)
当主题太多时,引入多个css文件,会导致加载比较慢
在 ***基础篇***中已经引入了主题,主题色为 ‘#EB5A30’
接下来使用gulp神器,生成新的主题
8、使用gulp-css-wrap神器
npm install gulp -g
npm install gulp-clean-css
npm install gulp-css-wrap
9、在根目录下创建一个名为gulpfile.js的文件
// gulpfile.js
var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
return gulp.src(path.resolve('./theme/index.css'))
/* 找需要添加命名空间的css文件,支持正则表达式 */
.pipe(cssWrap({
selector: '.custom-02abfd' /* 添加的命名空间 */
}))
.pipe(cleanCSS())
.pipe(gulp.dest('src/assets/css/theme/02abfd')) /* 存放的目录 */
})
10、命令执行gulp
gulp css-wrap
// (css-wrap)为上面gulp.task任务名称
11、把生成主题时生成的fonts复制到此处
12、把生成的index.css 引入main.js中
13、给body添加class类名
如果要记住当前主题色,使用localStorage,改变body的class类名既可以更改element-ui的主题色
最后:
可在控制台中查看选择器前面多了我们添加的class类名
三、补充篇;结合scss动态更换样式
14、在variables.scss文件夹中定义主题色
15、在 mixin.css 中定义函数
16、在组件中引用
四、报错篇(使用gulp的时候报错)
解决方案:
下载gulp就可以了
npm install gulp
然后继续:(接步骤10)
gulp css-wrap
就可以生成css文件 (步骤11查看生成的文件)