怎么在vue组件中导入css样式

在Vue组件中导入CSS样式，有以下几种方式：

1. 在组件中使用style标签导入CSS样式

在Vue组件中，可以使用style标签来定义组件的CSS样式，例如：

<template>
  <div class="my-component">Hello World</div>
</template>

<style>
  .my-component {
    font-size: 20px;
    color: red;
  }
</style>

2. 在组件中使用import导入CSS文件

在Vue组件中，也可以使用import语句来导入CSS文件，例如：

<template>
  <div class="my-component">Hello World</div>
</template>

<script>
  import './my-component.css';

  export default {
    // ...
  }
</script>

在这个例子中，我们通过import语句导入了一个名为my-component.css的CSS文件。

3. 在组件中使用Vue CLI提供的scoped样式

Vue CLI提供了scoped样式功能，可以在组件中定义样式时自动添加一个唯一的标识符，确保样式只作用于当前组件而不影响其他组件。使用方法如下：

<template>
  <div class="my-component">Hello World</div>
</template>

<style scoped>
  .my-component {
    font-size: 20px;
    color: red;
  }
</style>

在这个例子中，我们在style标签中添加了scoped属性，表示这些样式只作用于当前组件。这样，即使其他组件中也定义了.my-component样式，也不会影响到当前组件。