vue3中 style样式通过 @import方式引入时，全局污染

背景

项目从webpack 切换成vite后，界面中部分样式不生效。在vite中ComponentB 字体并没有变成红色

项目代码解决结构模

父组件 index.vue

<template>
  <div>
    <ComponentA></ComponentA>
    <ComponentB></ComponentB>
  </div>
</template>
<script lang="ts" setup>
import ComponentA from "./componentA.vue";
import ComponentB from "./componentB.vue";
</script> 

index.less 文件里面存在b-class 类型，污染全局

.b-class{
  color:red;
}

.a-class{
  color:blue;
}

ComponentA.vue 注意中只有scoped，并没有lang的配置。

<template>
  <div>我是组件ComponentA</div>
</template>
<style scoped>
@import "./index.less";
</style>

ComponentB.vue

<template>
  <div class="b-class">我是组件ComponentB,我没有样式，可以看看我有没有被全局污染</div>
</template>
<style lang="less" scoped></style>

问题原因

本因是 import发起了一个请求，通过地址获得相应资源，这个时候并没有加私有限制scoped，引入的文件将作用于全局；并不是将代码引入到当前.vue下。

为什么vite不会污染，看一下vite官网给出的解释

我们应该怎么正确的写

    <style scoped src="./index.css"></style>
    <style scoped src="./index.less"></style>

其他尝试1

我们可以注意到ComponentA.vue 文件中，中只有scoped，并没有lang的配置。 所以尝试ComponentA.vue文件中，加上lang="less",发现并不会在ComponentB.vue中生效，不会发生污染

其他尝试2

将index.less 文件改为.css文件,并且ComponentA.vue加上scoped lang="css"。发现依然被全局污染

 <template>
  <div>我是组件ComponentA</div>
</template>
<style scoped lang="css">
@import url("./index.css");
</style>

如有不正确的地方，欢迎指正