vue引入css样式

在Vue中引入CSS样式有几种方法：

1. 直接在组件的`<style>`标签中编写CSS样式。这种方法适用于只在当前组件中使用的样式。

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style>
.my-component {
  /* CSS样式 */
}
</style>

2. 使用`import`语句引入外部的CSS文件。这种方法适用于多个组件共享的样式。

首先，在你的Vue项目的`src/assets`目录下创建一个名为`styles.css`（或其他名称）的CSS文件，并在其中编写所需的样式。

然后，在你的组件中使用`import`语句引入该CSS文件：

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style lang="css">
/* 可以省略lang="css"，因为默认是CSS语法 */
@import "@/assets/styles.css";
</style>

3. 使用CSS预处理器。如果你在Vue项目中使用了Sass、Less或Stylus等CSS预处理器，可以通过`lang`属性指定相应的预处理器，并在组件中编写对应语法的样式。

例如，使用Sass预处理器：

<template>
  <div class="my-component">
    <!-- 组件内容 -->
  </div>
</template>

<style lang="scss">
.my-component {
  /* Sass样式 */
}
</style>

以上是一些常用的Vue中引入CSS样式的方法，根据你的具体需求选择合适的方式进行样式管理。