vue文件怎么引入css

标题：Vue.js 文件中引入CSS的易懂指南

在 Vue.js 开发中，CSS 用于为我们的组件提供样式和布局。为了在 Vue 文件中正确地引入和使用 CSS，我们可以采用多种方法。下面将分别介绍几种常见的引入行为。

### 1. 内联样式（Inline Styles）

这是最易懂的引入行为，适用于样式较少或者临时需要的地方。在 Vue 的单个组件模板里，可以直接使用 `

```

`scoped` 属性确保了这些样式仅作用于当前组件。

### 3. 外部样式（External Stylesheets）

对于更错综的样式需求，通常会将 CSS 分离到单独的 `.css` 文件中。Vue 提供了两种行为来引用外部 CSS 文件：

#### 3.1 使用 `link` 标签

在 `index.html` 或其他入口文件中，通过 `link` 标签引入 CSS：

```html

```

然后在 Vue 组件中通过 `v-bind:class` 或者 `ref` 等行为引用样式。

#### 3.2 使用 `@import` 规则

在 Vue 组件的样式部分，使用 `@import` 导入外部 CSS：

```html

```

这同样适用于 `.vue` 文件内的 `