vue 2.0开发项目中stylus 的配置和使用

其实，之前一直都是css 写样式 的。但是到了vue2.0时代，似乎得换个方式了，看到得教程也都是用stylus，既然可以定义css变量和函数，感觉很牛掰啊！所有也就上手试试。

首先是安装 ，在node环境下执行 npm install stylus stylus-loader --save
自己检查package.json 里面是否安装成功。

其次，就可以在项目中定义变量了：比如新建一个 mycolor.styl 得文档，

// 颜色定义规范
$color-background = #222
$color-background-d = rgba(0, 0, 0, 0.3)
$color-highlight-background = #333

接着就是在vue 文档中 的引用。需要主意 的是必须注明你的lang类型，不然就会编译时报错。

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/mycolor.styl"
 #teststyl h3
    color $color-theme


</style>

好了，就是这么简单。