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

Posted 小闹心lu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义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 [email protected]
npm i [email protected]
npm i [email protected]

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

第一步:先安装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覆盖

以上是关于自定义element-ui主题,修改样式的主要内容,如果未能解决你的问题,请参考以下文章

vue 项目全局修改element-ui的样式

element-ui替换主题色介绍

Vue项目动态主题切换

修改Element-ui中tree组件最底层节点的样式

vite +elementPlus vue3自定义主题色

vite +elementPlus vue3自定义主题色