Vue中如何解决CSS样式穿透问题？

本文共计1342个文字，预计阅读时间需要6分钟。

1. 问题来源：在制作两款H5 APP项目时，初期采用微信官方推荐的weui组件库。但随后因效果不理想，组件不够丰富，最终项目完成后升级采用了有赞开发的vant组件库。同时将webpack作为构建工具。

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的单文件组件。