vue 样式加scoped不起作用

Posted 2021-03-03 mr-rshare

出现环境：在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>