VUE中的CSS样式渗透1.问题是我在做两个H5APP项目。前期使用的是微信官方推荐的weui组件库。后来由于渲染效果不理想，缺少丰富的组件，项目完成后，全部升级使用有赞开发的vant组件库。同时webpack从3升级到4成功（项目结构webpack+vue+vue-store+vue-router+vant+less）。相信很多TOB开发的朋友都会选择顺数组件库。组件库内置了很多样式，方便了我们开发者的使用，同时也因为高度的封装，有时也会给我们带来一点点麻烦。比如在vant组件库中使用圆形进度条时，查看官方文档更改进度条颜色，更改轨迹颜色，更改填充颜色。它只是不改变显示文本的颜色。巧合的是，我们的需求是改变文字颜色。怎么做？写个css不是很好吗？2.写一个样式为了说明情况，我特意为这篇文章提供了一个测试demo。假设你已经初始化了一个Vue项目，引入了我们需要的vant组件库。接下来，我们在components文件夹中创建一个CssScope.vue的单文件组件。基本代码如下：
编译运行，我们会在浏览器中看到一个圆形的进度条，进度条进度为90%。当然，90%的显示文字都是黑色显示的，现在我们来改一下。一开始我们以为文字颜色color可以继承parent，于是在Style标签中写了如下css样式：.van-circle{color:blue;}回到浏览器，文字颜色没有变化。通过Chrome的开发者工具，找到我们的圆形进度条。原来这个组件是由一个svg和div标签组成的，svg用来展示我们的图形，div用来展示文字。在这个div上有一个类van-circle__text。我们刚才在parent中设置的字体颜色根据css优先级是没有效果的。找到原因，就好办了。我们需要在Style标签中定义这个类选择器，并将其字体颜色设置为蓝色。所以我们把刚才写的样式删掉，改写如下：回到浏览器，效果还是一样。黑，还是黑。此时，回到chrome，在开发者工具中找到我们的元素。仔细看会发现，显示文字的label好像和parent不一样，缺少data-v-xxx这个属性。也许样式的作用域在耍花招，那我们就把它去掉。回到浏览器，文字颜色居然变了。开心之余，是不是总觉得哪里不对劲？我们得查查这个水鬼scoped3。Style中的Scoped魔法效果我们的项目使用Less作为CSS预处理语言。通常在组件中使用带有scoped属性的Style标签。scoped属性的作用是在编译打包后统一给当前组件一目了然的标签添加一个随机属性（下图中的data-v-97a9747e）如下图：编译后的css还将添加该随机属性，我们将返回解决问题。在我们去掉scoped之后，Style标签中的样式就变成了全局的。这不是我们想要的结果。不生效的原因通过上面两张图一目了然。我们必须穿透它。该怎么办？查找文档？记得在vue-loader中找到它。4.Deptheffectselector从官方文档来看，我们所说的穿透，官方称之为深度选择器。如何使用它？只要在我们要穿透的选择器前面加上>>>或/deep/或::v-deep即可。官方还说>>>可能有问题。推荐使用后两者。我们使用less，所以选择/deep/，所以我们在style中把刚才删除的scoped属性加回来，修改为如下代码：.van-circle{/deep/。van-circle__text{颜色：蓝色；}}回到浏览器，改变颜色，你就完成了。不过我们还是要仔细检查一下，重新找到生成的css，如下图：是的，没有错，就是我们想要的结果。5.总结写代码，查问题，找正路。如果用别人的东西，看对应的官方文档就可以了。欢迎感兴趣的朋友关注我的微信订阅号“小源不小”，或点击下方二维码关注。我会把自己多年开发中遇到的困难，以及一些有趣的功能发布出来，我的经验会一一发布到我的订阅号。如果需要本文的demo，可以在公众号回复vuescoped。我没有事儿。我用cocoscreator开发了一个小游戏。有兴趣的可以来玩
