[关闭]
@2890594972 2017-12-01T17:33:28.000000Z 字数 615 阅读 1194

element-ui组件样式修改

element-ui


注意

  1. 整体修改:可以通过修改 element-variables.css文件里的变量,即可改变整体风格。
  2. 修改部分源码进入:node_modules/element-theme-default/src目录下修改相应文件的代码即可
  3. 注意:修改源码的时候不会触发编译的watch模式,需要手动再保存一遍 element-variables.css这个文件才可以触发编译效果。
  4. 最后:下一步就是将我们修改的引入就可以了
  5. eg: import '../theme/index.css'

可参考:http://blog.csdn.net/wangcuiling_123/article/details/78513245

首先,安装「主题生成工具」

npm install element-theme -g
image_1c09etq291crsbvp1p2ua04124b13.png-31.4kB
image_1c09evr9i19kdc08a218sius120.png-134.5kB
image_1c09f0kvg1a5kd231t9j18lnvk42d.png-98.5kB

其次安装chalk主题

  1. cnpm i -g element-theme-chalk
  2. npm link element-theme-chalk

image_1c09eqb881a5hm0v11dr1c4n15gpm.png-35.9kB

其次,从github或者npm上拉取默认主题

从 npm:
npm i element-theme-default -D#
image_1c09eoji36pt122g1g2b13h8egn9.png-26.6kB

或者

从 GitHub
npm i https://github.com/ElementUI/theme-default -D

et调用工具,初始化变量文件

通过et调用工具,执行-i初始化变量文件

  1. et -i

image_1c09f39bl1shs1lpu1udlirb1rlc37.png-6kB

image_1c09f26lmt1jbgl1anu1ueg1b6n2q.png-6.7kB

et编译scss文件

直接编辑对应的CSS文件,然后保存,保存文件后,再到命令行执行:

  1. et

image_1c09f4o7m113ul2h9da8i1qph3k.png-6.1kB

image_1c09f5b7r15mc1s28nmq17u7asq41.png-7.5kB

image_1c09f615mool1gop33e187g47p4e.png-30.4kB

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注