自定义element-ui主题,修改样式

项目需求

之前项目中引用的select选框有bug,所以需要改动,考虑到还有许多需求,果断将饿了么组件全移过来

安装element-ui2.0.1版本

安装完之后,我就将element-ui的组件应用上,然后编译的时候报错了。就是el-ipt找不到一类的错误,查了查资料,说是版本不一致,element-ui2.0的版本需要升级vue的版本,如下解决办法:
更改版本 把vue 和 vue-template-compiler 都更新到了2.5.3版本
npm remove # 卸载某个版本
npm remove vue
npm remove vue-template-compiler
npm i vue@2.5.3
npm i vue-template-compiler@2.5.3
npm i element-ui@2.0.1

根据官网步骤来自定义主题

第一步:先安装npm i element-theme ,这里起先我装的是全局的,然后一直报错,就换成了项目中安装
第二步:npm i element-theme-chalk -D 更新组件
接下来就是et -i ,没有看清官网上写的就直接打上了,结果报错。原因是项目中安装的主题需要通过node_modules/.bin/et 访问到命令
执行后当前目录会有一个 element-variables.scss 文件
接下来就是在文件里修改变量内容了。

生成引入修改后的css文件

命令行里输入 node_modules/.bin/et 然后得到css文件,最后在main.js中引入即可。
另外,有一些里面不能同意修改的css,我选择在外面另外写css覆盖

原文地址:https://www.cnblogs.com/llff123/p/8665679.html