Stylus的介绍
Stylus 是一个基于Node.js的CSS的预处理框架，诞生于2010年，比较年轻，可以说是一种新型语言，其本质上做的事情与 Sass/LESS 等类似， 可以以近似脚本的方式去写CSS代码，创建健壮的、动态的、富有表现力的CSS，默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。
【优点】
解决样式覆写的问题，尤其是mixin式复用
使用纯CSS，我们可以抽象出一些常用的布局CSS属性组合，通过CSS的类组合来达成常见的mixin式复用，然而这种方案存在一些问题，例如:
当页面重构时，需要频繁修改class name，这个问题在后端人员掌握着视图层的时候格外突出，前后端耗费很多沟通成本；
在约束上下文的时候非常无力，比如“只有在ul下面的img.db允许是display:block”的规则，写成“ul img.db { display: block; }”就完全跑偏了，它违背了创建这个.db类时的本意，造成了代码的可读性和可维护性下降。
如果你要改动规则，需要同时修改HTML和CSS，也可能造成新的样式问题。
而通过Stylus可以建立一种新的代码风格，只允许CSS Class代表UI模块的抽象，这样一来，改动样式时不至于通知后端改模板，然后在CSS Class内部实现mixin。而这正是CSS的短板，CSS体系内的用法只有复制粘贴。
可缓解多浏览器兼容造成的冗余
进入CSS3的时代，旧式CSS hack如filter，新式兼容前缀如-webkit-等，都是冗余，修改的时候也需要修改多处，不容易维护。在Stylus里面，写个函数就能解决，多次复用也不需要看到如此之多的hack。
提高效率，节约成本
用Stylus开发CSS可以提高效率，它类似于一种CSS的方言，可以用更精简的语法表达更多的意思。比如，Stylus中可以使用变量，比如和 UED 同学订好各种样式的规范，做好变量后开发中直接使用，避免页面中的各种杂乱样式。当样式需求有变动时，也可以重新给变量赋值，一下改掉相关样式，不用再一点一点的改。
使CSS开发更加灵活
Stylus可以使用变量、条件、循环，兼容传统的CSS样式，等等，可以让CSS的开发和修改更加灵活。
vue 引入 stylus
建立好项目后我们来安装stylus
npm install stylus stylus-loader --save-dev
这样就安装上了stylus。
记得在 style 标签加上：
<style scoped lang="stylus">
注意: npm run build 时记得修改 config 文件夹下的 index.js 中的 build 对象。