Different behavior in style insertion order between vue-cli2 and vue-cli3

[hangaoke1]

version

• 2.x
• @vue/cli-service@^3.7.0

Environment info

Different behavior with same code

Steps to reproduce

vue create vue-project-v4
vue init vue-project-v3

// hello-world.vue
<template>
  <div class="test-find">
    <h1>test-find cli@3</h1>
    <x-span></x-span>
  </div>
</template>

<script>
import xSpan from './x-span.vue'
export default {
  components: {
    xSpan
  }
}
</script>
<style lang="less">
.test-span {
  color: green;
}
</style>

// x-span.vue
<template>
  <div class="x-span">
    <h1 class="test-span">hello world</h1>
  </div>
</template>
<script>
export default {
  name: 'x-span'
}
</script>

<style lang="less">
.test-span {
  color: blue;
}
</style>

What is expected?

both hello world has same color style

What is actually happening?

in v4 the hello world color is green
in v3 the hello world color is blue

[vue-bot]

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!