Vue2 vue-cli 中stylus 报错unexpected indent

用Vue-cli构建项目的时候，用stylus写样式，各种报错 unexpected indent 。浪费了两个小时的时间终于搞明白了问题。

踩坑

如下图：

添加background-size属性的时候，就会报出这个错误。

很明显意思就是缩进错误。但是我怎么看也看不出所以然。

尝试解决

各种搜索，google， stractoverflow…

得到的信息是 : tab和空格混用缩进，导致stylus编译出错

嗨，rewrite my code.

如下图：

嗯，这次不报错了。但是我对比了下。发现这两次的代码并没有什么不同！

但是管不了了，继续项目吧。项目能跑起来就行~！

解决问题

但是，就在我快写完了样式，但是遇到一个要绝对定位的元素，于是找到父元素，添加position:relative属性。发现： 又报同样的错误了！！！！

既然是tab和空格缩进，但是由于本人已经习惯了，空格，tab混用。那么能不能在我的sublime text3 里区别一下空格和tab形成的缩进呢。哈哈 可喜的是： 能！

找到Preference > settings(user) 里

“draw_white_space” 设置为 “all”

"draw_white_space": "all",

这个时候看sublime text3 如下图：

明显的看到：哪些用了空格，哪些用了tab。统一风格后，哈哈。再也不担心报错啦！~