如何在Vue组件中重写css

<template>
  <div class="my-component">
    <p class="text">Hello, Vue!</p>
  </div>
</template>

<style scoped>
.my-component {
  background-color: #f0f0f0;
}

.text {
  color: red;
}
</style>

<template>
  <div class="my-component">
    <p class="text">Hello, Vue!</p>
  </div>
</template>

<style>
@import url('path/to/global.css');

.my-component {
  background-color: #f0f0f0;
}

.text {
  color: red;
}
</style>

<template>
  <div :class="$style.myComponent">
    <p :class="$style.text">Hello, Vue!</p>
  </div>
</template>

<style module>
.myComponent {
  background-color: #f0f0f0;
}

.text {
  color: red;
}
</style>