如何将css导入到一个组件中？

<link rel="stylesheet" href="styles.css">

<style>
    .my-component {
        /* CSS styles here */
    }
</style>

import React from 'react';
import './styles.css';

const MyComponent = () => {
    return (
        <div className="my-component">
            {/* Component content here */}
        </div>
    );
}

export default MyComponent;

<template>
  <div class="my-component">
    <!-- Component content here -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  /* Other component properties here */
}
</script>

<style scoped>
  @import 'styles.css';
</style>