Vue style scoped 使用@import引入css, 作用域是全局的解决方案

这两天有开始搞华为VOLTE第二版了，偷懒样式直接@import，这时发现第一版样式全服错乱，查看了下是在使用@import引入css的时候，css-loader对import的文件会当做外部资源来编译造成它变为全局样式
案例

<style scoped>
@import "./main.css";
.VoLTE{
  width: 100%;
  height: 500px;
  background: #434656;
  background-size: cover;
}
</style>

修改成

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

注意：如果想要额外增加样式需要单独写个style，如果在<style scoped src="../main.css"></style> 中增加样式将不生效所以最后改成下面效果，当然你也可以直接写到mian.css里面

<style scoped src="./main.css"></style>
<style scoped>
.VoLTE{
      width: 100%;
      height: 500px;
      background: #434656;
      background-size: cover;
    }
</style>