vue 样式加scoped不起作用

出现环境:在vue组件中使用了scoped,发现手写的标签样式起作用,但是第三方的组件标签并没有起作用

 原因:

  1. 先搞清楚scoped的布局实现

    在style上加上scoped后 会对 style里面加了样式的标签 每个加上一个 像这样的一个属性

    data-v-4686dc05  

    组件内的样式只会对带有这个标签的dom元素生效,因此加上scoped后,组件内的样式不会影响组件外。

            官方文档

  2. scoped 只会作用于自组件的根组件

    官方解释:使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响

 

 

解决方案:

  1. 加上一个不带scoped的style

    <style scoped>

      // scoped style
    <style>
    <style>

      //no scoped style
    </style>

  2. 使用 >>> 深度访问 注意:只针对css起作用   一些sass less预处理器不起作用

    

  <style lang="css" scoped>
    .a >>> .b { 
       /* ... */ 
    }
  </style>

  3. 使用 /deep/  或者  ::v-deep 推荐使用 ::v-deep可以直接使用

  // 我在使用/deep/时会报错  查了一下  需要修改webpack ,vue-loader

  

  <style lang="scss" scoped>
    .a{
       ::v-deep .b { 
          /* ... */ 
       }
      } 
    </style>    

 

posted @ 2020-03-30 12:11  Mr_R  阅读(5251)  评论(0编辑  收藏  举报