详解Vue中CSS样式穿透问题
1. 问题由来
在做两款H5的APP项⽬，前期采⽤官⽅推荐的weui组件库。后来因呈现的效果不理想，组件不丰富，最终项⽬完成后全部升级采⽤了有赞开发的vant组件库。同时将webpack顺利从3升级到4（项⽬结构 webpack+vue+vue-store+vue-
router+vant+less）。相信好多做TOB的开发朋友都会选择顺⼿组件库。组件库内置了很多样式，⽅便了我们开发者，同时⼜因⾼度封装，有时也会给我们带来⼀点点困扰。⽐如，在使⽤vant组件库中的环形进度条时，查看官⽅⽂档，有改变进度条颜⾊，有改变轨道颜⾊，也有改变填充颜⾊。就是没有改变显⽰⽂字颜⾊的。凑巧的是，我们的需求就是要改变⽂字颜⾊。怎么办呢？写个css不就好了么。
2. 编写样式
为了说明情况，我为本⽂专门配合了⼀个测试demo。假如您现在也已经初始化好了⼀个Vue项⽬，并引⼊了我们需要的vant 组件库。接下来，我们在components⽂件夹中新建⼀个CssScope.vue的单⽂件组件。基本代码如下：
<template>
<div><van-circle v-model="currentRate" :rate="90" :speed="100" :text="text" /></div>
</template>
<style lang="less" scoped>
</style>
<script>...</script>
编译运⾏，我们在浏览器就会看到⼀个进度为90%的环形进度条。当然显⽰⽂字90%显⽰是⿊⾊，现在我们就来改变它。
最初我们想到，⽂字颜⾊color是可以从⽗级继承的，所以我们在Style标签中写下如下css样式：css样式表优先级最高
<style lang="less" scoped>
.van-circle{color:blue;}
</style>
回到浏览器，⽂字颜⾊没变。通过Chrome的开者⼯具，到我们的圆形进度条。才发现，原来，这个组件内部是⼀个svg 和div 标签组成，svg⽤于显⽰我们图形，div⽤于显⽰⽂字。并且在这个div上存在⼀个class 为 van-circle__text。根据css优先级，我们刚在⽗级设置的字体颜⾊⽆效。到原因，那就好办了。我们需要在Style标签中定义这个class选择器，并设置它字体颜⾊为蓝⾊。于是我们删除刚写的样式，改写为如下：
<style lang="less" scoped>
.van-circle{
.van-circle__text{olor:blue;}
}
</style>
这下应该可以了，可回到浏览器，效果依旧。⿊⾊，还是⿊⾊。此时，回到chrome，在开发者⼯具到我们的元素。仔细的你才发现，显⽰⽂字的标签和它的⽗级好像不⼀样，少个data-v-xxx的属性。也许是style的 scoped搞⿁，那我们就去掉。回到浏览器，⽂字颜⾊居然改变了。欢喜之余，总感觉哪⾥不对？我们得查查这个⽔⿁scoped
3. Style中的 Scoped神奇效果
我们的项⽬采⽤Less作为CSS 预处理语⾔。在组件中习惯于使⽤⼀个带有scoped属性的Style标签，scoped 属性的效果，就是在编译打包后，在当前组件能⼀眼看到的标签中统⼀添加⼀个随机的属性（下图 data-v-97a9747e）如下图所⽰：
编译的css也会对于加上那个随机属性
我们再在回到解决问题的那⾥，我们去掉了scoped后，Style标签⾥边的样式变成全局的了，这可不是我们想要的结果。不⽣效的原因，通过以上两图，已经⼀⽬了然。我们得穿透⼀下。怎么办?⽂档?记得在vue-loader中。
4. 深度作⽤选择器
从官⽅⽂档了解到，我们所谓的穿透，官⽅叫做深度选择器。怎么⽤的呢 ?就是在我们想穿透的选择器前边添加 >>> 或者
/deep/ 或者 ::v-deep。官⽅还说>>>可能存在问题，建议⽤后两者，我们⽤的less，就选择 /deep/ 好了，于是我们加回刚在style中删除的scoped属性，并修改为如下代码：
<style lang="less" scoped>
.van-circle {
/deep/ .van-circle__text {
color: blue;
}
}
</style>
回到浏览器，颜⾊改变，⼤功告成。不过，我们还是得仔细检查检查，再次到⽣成的css，如下图所⽰：
对，没⽑病，是我们要的结果。
4. 总结
写代码，查问题，得对路径。⽤别⼈的东西，就多看看对应官⽅⽂档。
以上所述是⼩编给⼤家介绍的Vue中CSS样式穿透问题，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！