Vue 集成 stylus和stylus-loader

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