如题,今天我来教大家如何修改Cube-UI的默认颜色。
首先我的项目是在main.js中全局引用了Cube-UI。
用简单的按钮来做测试。
<cube-button>Button</cube-button>
第一步找到Cube-UI的模块包中的default.styl文件。
@require "../var/color.styl"
//引用了var中的color.styl文件
color.styl中存放的是定义的颜色。
你可以在color.styl中定义你想要的颜色也可以修改原有的颜色。
添加以下代码
$color-new = red
再返回到default.styl中
找到button
修改button的颜色,把背景颜色改为我们刚刚在color.styl定义的值
// button
$btn-color := $color-white
$btn-bgc := $color-new
$btn-active-bgc := $color-blue
效果
相信看过之后也了解了styl的一些语法,与sass如出一辙,Cube-UI的颜色还是很好改的。
希望可以帮助到大家。
祝,早日升职加薪!