【踩坑记录】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后严格缩进两格，否则无法识别。

巴特西

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

最新文章

热门文章