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>

好了，就是這麼簡單。