Vue中引入外部css导致的全局污染

问题

当在前端使用vue开发时，给特定页面做好了css并且通过import去导入到当前页面；在编译运行之后发现其他页面也受到影响更改了样式，即“全局污染”。

污染方式

1. 单组件污染
   单个组件样式，影响到了其他的组件的样式。
   单个组件污染的问题主要表现在< style>样式< /style>上不加 scoped;
   scoped的作用就是让样式只作用于当前组件，如果没有 scoped，那么样式就有可能影响其他组件。
2. 多组件污染
   多个组件在会共用一套CSS代码时，就会造成多组件污染的情况：
   <style scoped> @import "assets/css/common.css"; </style>
   这种方式也会造成全局污染的情况；但是已经加了scoped，最后无效的原因是“@import”，原因如下：
   @import并不是直接引入css代码到页面，而是发起新的不带scoped的请求获得样式资源；因此，这种引用方式是全局的，从而引起全局污染。

   解决办法

   在VUE中，页面是被允许添加多个Style、Script的，所以可以再添加一个Style通过src的方式去获取样式资源就能解决样式污染问题：

   <style src="@/assets/css/yours.css"  scoped>
   </style>