详细解释CSS样式在Vue中的渗透

1.问题的根源

我在做两个H5 APP项目，前期用的是微信推荐的weui组件库。后来由于结果不尽如人意，缺少组件，最终项目完成后，对有赞开发的vant组件库进行了升级。同时，webpack成功从3升级到4(项目结构：web pack vue vue-store vue-router vant less)。相信很多做TOB的开发朋友都会选择方便的组件库。组件库中内置了很多样式，方便了我们的开发人员，但由于封装度高，有时也会给我们带来一点麻烦。例如，使用vant组件库中的圆形进度条时，在查看正式文档时，可以更改进度条的颜色、轨道颜色和填充颜色。显示文本的颜色没有变化。巧合的是，我们需要的是改变文字的颜色。我该怎么办？写个css就行了。

2.写作风格

为了说明情况，我特意为这篇文章配合了一个测试演示。假设您已经初始化了一个Vue项目，并引入了我们需要的vant组件库。接下来，我们在components文件夹中创建一个新的单文件组件CssScope.vue。基本代码如下：

template div van-circle v-model=' current trate ' : rate=' 90 ' : speed=' 100 ' : text=' text '/div/template style lang=' less '作用域/stylescript./script

在编译和运行时，我们会在浏览器中看到一个进度为90%的圆形进度条。当然，90%的显示文本是黑色的。现在让我们改变它。

起初，我们认为文本颜色颜色可以从父级继承，因此我们在样式标签中编写了以下css Style:

style lang=' less ' scoped . van-circle { color : blue；}/样式

回到浏览器，文本颜色没有改变。通过Chrome的开启工具找到我们的圆形进度条。原来这个组件的内部是由svg和div标签组成的。svg用于显示我们的图形，div用于显示文本。这个分区上有一类范圆文本。根据css优先级，我们刚才在父级设置的字体颜色无效。找到原因，那就简单了。我们需要在Style标签中定义这个类选择器，并将其字体颜色设置为蓝色。所以我们删除了刚才写的风格，重写如下：

style lang=' less ' scoped . van-circle {。van-circle _ _ text { olor : blue；} }/样式

这应该没问题，但是你可以回到浏览器，效果还是一样的。黑色，或者黑色。现在，回到chrome，在开发者工具中找到我们的元素。如果你仔细看，你会发现显示的文本的标签似乎和它的父级不同，而且data-v-xxx的属性丢失了。也许这是风格的范围，所以我们将摆脱它。回到浏览器，文字颜色变了。开心的时候总觉得哪里不对劲。我们需要检查这个水鬼范围

3.《风格的范围》的神奇效果

我们的项目使用Less作为CSS预处理语言。组件中使用了具有作用域属性的样式标记。scoped attribute的作用是在标签中添加一个随机属性，在编译和打包后，可以在当前组件中一目了然地看到该属性(如下图所示的data-v-97a9747e):

编译后的css还会将该随机属性添加到

当我们回到解决问题的时候，在我们摆脱了scoped之后，style标签中的Style变成了全局的，这不是我们想要的。无效的原因，通过以上两个图，一目了然。我们需要渗透进去。怎么办？找文件？记得看看vue-loader。

4.深度动作选择器

根据官方文件，我们所说的穿透正式称为深度选择器。怎么用？就是在我们要穿透的选择器前面加or /deep/or :v-deep。这位官员还说，可能有问题。建议使用后两种。如果使用较少，我们将选择/deep/，因此我们将刚刚在样式中删除的作用域属性添加回来，并将其修改为以下代码：

style lang=' less ' scoped . van-circle {/deep/。van-circle__text { color:蓝色；} }/样式

回到浏览器，颜色改变，你就完成了。但是，我们还是要仔细检查，再次找到生成的css，如下图所示：

是的，没有错。这是我们想要的结果。

4.摘要

写代码，检查问题，找到正确的路径。用别人的东西，就看相应的公文。

以上是边肖介绍的Vue中CSS样式渗透问题。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！