vue中 在scoped下通过@import引入css的作用域？

我最近再优化公司的老项目。有时候看的头大。不得不吐槽一下，样式层级特别深，实在想不明白，前任如何开发的，有那么多力气写长达10级的层次。（当然我写的也未必就是最好的。所以要努力，学习更好的！如果能简化复杂的页面，那也是一种成长，所以静下心来，继续一点点改造！）

首先，发现的问题是多个组件都同时引入了同一个css,引入的方式如下

<style > 
@import '../*.css';
</style>

因为我在F12的时候，发现一个样式写了很多次，而且是完全重复的。所以我看到此种写法的时候，认为多次引入到全局导致的。于是我修改为(添加了scoped)：

<style scoped> 
@import '../*.css';
</style>

那我理解的是每个都只作用于本页面。可事实并不是这样，仍然是全局的样式，而且在多个页面都引入相同文件，也只加载了一次。除非这样写，在一个页面引入多次，那么会是多加载多次，如下：

<style scoped> 
@import '../1.css';
@import '../1.css';
</style>

于是查了资料，说明通过@import *.css 引入的是指向全局的。 猜测原因可能跟@import引入的时候是同步加载的有关。（不是很明白）感觉会提早走webpack的配置，会判断是否为同一个文件。如果同一个则只引入一次在全局下。
那如何解决呢？可以通过如下方式，引入到局部作用域。

<style scoped src="1.css"> 
</style>