What could happen Vue CSS Scope with @import

TheHeader.vue

/**
 * Asnwer: 
 * @import new-style.css wrapped inside <style scope> won't make the CSS code imported become scoped
**/

# Correct Scoped
<style scoped>
header {
  width: 100%;
  height: 5rem;
  background-color: #3d008d;
  display: flex;
  justify-content: center;
  align-items: center;
}

# Failed Scoping
<style scoped>
@import '../../assets/header.css';
</style>

COMMENTS
Now the interesting part is WHY ?
Let's go to stackoverflow first

Clues
https://stackoverflow.com/questions/63609445/vue-style-scoped