vue中组件的引入外部样式时通常采用@import “样式文件路径”
比如

<style>
@import "assets/css/base.css";
</style>

一般应用于全局组件的初始化与多个组件共用同一套样式的时候，
全局组件样式初始化这个比较好理解，因为是作用于全局组件，所以就不会有污染的问题，现在我们就来谈谈局部样式（单个组件与多个组件）污染的问题

单个组件污染（单个组件的样式影响其他组件的样式）

• 单个组件污染的问题主要表现在< style>样式< /style>上不加scoped,scoped的作用就是让样式只作用于当前组件，如果没有scoped，那么样式就有可能影响其他组件

多个组件污染（多个组件共用的一套样式影响其他组件）

• 在开发过程中为了避免不必要的资源浪费，多个组件在会共用一套CSS代码时，如果采用

<style scoped>
@import "assets/css/base.css";
</style>

就会造成全局样式污染，即样式不单单只作用于这几个组件，全部组件他都会覆盖，可是我明明加了scoped了呀，为什么还会造成全局污染，原因是：

• @import并不是引入代码到里面，而是发起新的请求获得样式资源，并且没有加scoped
• 因此采用@import的方法引入外部样式时的作用域是全局

好了，我们该如何才能让外部的样式引用进来使scoped生效却又不作用于全局呢?我们可以采用如下方法

• 在style里采用src=“外部样式路径”

<style src="assets/css/base.css"  scoped></style>

这样就可以解决单个组件或多个组件外部样式引入的问题，希望此文能对你有所帮助