Vue的样式冲突

scoped：

 Vue-loader，使 Vue 可以使用类似于 Web Component 的组件化写法,<template></template><style></style><script></script> ，并且为组件中的 style 标签增加一个 scoped 标识。Vue-loader 在编译的过程中会为组件每一个元素节点增加 scopeId 作为属性，同时为所有的样式类加上属性选择器 scopeId，从而达到隔离的效果。

如图所示，这就是Vue-loader为元素加上的唯一scopeId，然后通过属性选择器选中

有这样一种情况，当我们引入bulma,ivew等第三方库时，这些库一般都会初始化一些样式。比如bulma中将所有的h标签都进行了处理。我们想改变这些默认的样式时，使用普通的方法是不会生效的，即使通过 !important提高优先级也不会生效。对于这种情况，我提供两种方法给大家：

1.将scoped属性去掉或再创建一个不含scoped的style标记

但是这样做失去了样式的保护，会污染全局。

2.vue提供的样式穿透

stylus的样式穿透 使用>>>

外层 >>> 第三方组件{
    样式 
}

.wrapper >>> .swiper-pagination-bullet-active{
    background: #fff
}



sass和less的样式穿透 使用/deep/

外层 /deep/ 第三方组件 {
    样式
}
.wrapper /deep/ .swiper-pagination-bullet-active{
    background: #fff;
}