码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-03-28 20:22:04      阅读:1282      评论:0      收藏:0      [点我收藏+]

标签:版本   mod   2.0   网上   sele   更改   variable   theme   vue   

项目需求

之前项目中引用的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覆盖

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

标签:版本   mod   2.0   网上   sele   更改   variable   theme   vue   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!