【踩坑记录】vue单个组件内<style lang="stylus" type="text/stylus" scoped>部分渲染失效

vue组件化应用，近期写的单个组件里有一个的渲染部分样式渲染不上去

因为同结构的其他组件均没有问题，所以排除是.vue文件结构的问题，应该是<style>内部的问题

<style lang="stylus" type="text/stylus" scoped>
  .recom
    height : 3.5rem
    padding-bottom : 40%
    .title
      margin-top : .2rem
      line-height : .8rem
      background : #eee
      text-indent : .2rem
    .img
      position : relative
      overflow : hidden
      float :left
      width : 50%
      height : 0
      margin-bottom :21%
      .img-content
        width : 3.3rem
        height : 2.1rem
        margin-top :.2rem
        margin-left :.2rem
        border-radius : .2rem
      .img-info
        font-size : .23rem
        margin-top : .1rem
        text-align : center
</style>

问题解决：

最后发现是class的优先级的问题，因为stylus简化了css写法,所以子级别class（被父元素包裹的元素的class）应该在父级别class后严格缩进两格，否则无法识别。