stylus和stylus-loader安装

cnpm i stylus -S 
cnpm i stylus-loader -S

stylus使用

一、语法不再需要括号，相比之前语法简洁

<style lang="stylus" scoped> 
.login 
  width 100% 
  height 100% 
  text-align center 
  background url('./../../images/bgc/bgc.jpg') 
  background-repeat no-repeat 
  background-size cover 
  overflow hidden 
 
  h1 
    margin-top 40% 
 
.login-from 
  width 80% 
  text-align center 
  padding 10px 
  margin 0 auto 
  box-shadow 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19) 
 
  .btn 
    text-align center 
    margin-top 10px 
 
.slide-enter-active, .slide-leave-active 
  transition all 0.5s 
 
.slide-enter, .slide-leave-to 
  opacity 0 
  transform translate3d(100%, 0, 0) 
</style> 

二、可以创建.styl扩展名的文件，然后在Vue组件的中引入，达到公用一些样式的目的。

例：在项目中使用通用背景色，在/src/assets/styles中创建varibles.styl，在其中写入代码：

$bgColor = #00bcd4

然后在组件中使用，

先引入varibles.styl，记住~一定要加:

@import '~styles/varibles.styl';

使用：

.header 
    background: $bgColor