element 更换主题
1 直接在项目中改变scss变量
Element中的theme-chalk使用scss编写,如果项目中使用了scss,那么可以直接在项目中改变Element的样式变量。新建一个样式文件,例如element-variables.scss
/*修改主题色变量*/ $--color-primary:red; /*改变icon字体路径变量,必须*/ $--font-path:'~element-ui/lib/theme-chalk/fonts'; @import '~element-ui/packages/theme-chalk/src/index';
之后,在项目的入口文件中,直接引入以上样式文件即可(无需引入Element编译好的css文件);
项目中使用sass,需要安装sass sass-loader node-sass
npm i sass sass-loader node-sass --save-dev
在引用sass文件时如果报错:
Module build failed: TypeError: this.getResolve is not a function at Object.loader...
是因为sass-loader的版本太高,只需要降低sass-loader的版本就可以了;
2 安装工具
首先安装【主题生成工具】,可以全局安装或者安装在当前项目下,推荐安装在项目中,方便clone项目时能直接安装依赖来启动。
npm i element-theme element-theme-chalk --save-dev
初始化变量文件
主题生成工具安装成功后,如果全局安装可以在命令行里通过et调用工具,如果安装在当前目录下,需要通过node_modules/.bin/et访问到命令。执行 -i 初始化变量文件。默认输出element-variables.scss,当然你可以传参数指定文件输出目录
1 直接执行 node_modules/.bin/et -i
直接在当前项目的根目录下生成element-variables.scss文件
2 指定文件名字node_modules/.bin/et -i my-theme.scss
直接在当前项目的根目录下生成my-theme.scss文件
3 指定文件在指定的文件夹下:node_modules/.bin/et -i theme/my-theme.scss
直接在当前项目的根目录下theme文件夹下生成my-theme.scss(前提条件theme文件夹是存在的)
生成的文件包含了主题所用到的所有的变量,它们使用SCSS的格式定义,直接修改变量的值就可以了。
编译主题
修改文件保存之后,在命令行里执行et编译主题,如果你想启用watch模式,实时编译主题,增加-w参数;如果你在初始化时指定了自定义变量文件,则需要
增加 -c 参数,并带上你的变量文件名。默认情况下编译的主题目录是放在./theme下,可以通过 - o 参数指定打包目录。
本地安装主题工具,
1 如果使用的是默认的配置直接执行 node_modules/.bin/et
2 自定义生成的文件 node_modules/.bin/et -c theme/my-theme.scss
3 默认编译后的文件的生成目录是theme文件下,可以增加 -o 参数自定义编译后的文件所在的目录:node_modules/.bin/et -c theme/my-theme.scss -o themeCss,编译后的文件就在themeCss文件夹下了
在项目main.js中直接引入index.css就可以了
引入自定义主题
和引入默认主题一样,在代码里直接引用「在线主题编辑器」或「命令行工具」生成的主题的 theme/index.css
文件即可。
import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)
搭配插件按需引入组件的主题,如果是搭配babel-plugin-component(组件需要按需引入时,需要先安装babel-plugin-component插件)一起使用,只需要修改.babelrc的配置,
指定styleLibraryName路径为自定义主题相对于.babelrc的路径,注意要加~。
{ "plugins":[ ["component",{"libraryName":"element-ui","styleLibraryName":"~theme"}] ] }