用了第三方组件的必然都会遇到你这样的问题，我说下我的解决方法，不一定是好的。
一个vue文件可以写多个<style></style>，加上socped代表本组件的样式，不污染全局。如果需要覆盖第三方组件样式，则不能加scoped，因此需要另写一个<style>.xxx-component{...}</style>，这里用一个大类包裹防止污染全局。
接着，我用比较笨的方法(有好的方法请告知)，就是打开f12检查究竟要覆盖哪些样式，然后写在没有加scoped的style里即可。
其实一些好的第三方UI库都有提供自定义样式的方法的，这样实现起来才是最便捷的。
首先，引入公共样式时，我们在“main.js”里使用AMD的方式引入,即
?
1require('./assets/css/main.less')require(http://r.yuzhua.com)
这时，我们会抛出一个错误，是因为我们没有写解析的依赖，webpack不知道怎么解析
这时，我们要填写上依赖，
?
1require('!style!css!less!./assets/css/main.less')在很多以前的博客里都是以上写法，这个是Vue 2.0刚开始的，现在使用会报错；下面是正确写法
?
1require('!style-loader!css-loader!less-loader!./assets/css/main.less')在以前配置到这里，就万事大吉了，也可以开始引入css文件了，然后现在到这里还会报错
当出现以上错误时，说明你的项目里缺少依赖；
?
1npm install style-loader --save这时你就可以引入css文件了；
最开始使用Vue的时候，是提倡并大量使用的是scoped的。
加上 scoped 属性的style会自动添加一个唯一的属性 。比如data-v-0467f817为组件内 CSS 指定作用域，编译的时候 .errShow会被编译成类似 .errShow[data-v-0467f817]。
这种添加唯一的属性的方法可以满足日常组件局部css作用域的开发需求，但其设计上有一定缺陷，.errShow[data-v-0467f817]并不能保证是唯一的，另外在性能上也不是很好，浏览器搜索.errShow[data-v-0467f817]的速度并不如.errShow，相比于这种方式，CSS modules则做的更彻底，它不是添加属性，而是直接改变类名。
CSS Modules
CSS Modules既不是官方标准，也不是浏览器的特性，而是在构建步骤中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式。
用法
配置
如果你的项目是用vue-cli搭建的，那么脚手架已经为你配置好了，直接可以使用，如果你是用webpack自己搭建的项目或想要修改默认配置，则进行下面配置。
css-loader关于CSS modules的默认配置如下：
可以使用vue-loader的css Modules选项为css-loader进行自定义的配置
