在 Vue 文件中如何引入 CSS

在 Vue 项目开发中，合理引入 CSS 样式能够极大提升用户界面的美观度和交互体验。下面就来详细探讨一下在 Vue 文件中引入 CSS 的几种常见方式。

首先是内联样式。内联样式是直接在 HTML 标签内使用 style 属性来定义样式。例如：<div style="color: red; font-size: 18px;">这是一段带有内联样式的文本</div>。这种方式简单直接，适用于一些临时且简单的样式设置，但不便于样式的复用和维护，代码冗余度较高。

其次是在 <style> 标签中定义样式。在 Vue 组件的 <template> 标签下方，我们可以添加 <style> 标签来编写 CSS 代码。例如：

<template>
  <div class="box">这是一个组件</div>
</template>

<style>
.box {
  background-color: lightblue;
  padding: 10px;
}
</style>

这种方式将样式与组件的结构放在一起，增强了代码的可读性和可维护性。不过，如果多个组件都需要相同的样式，就会造成代码重复。

为了解决样式复用问题，可以使用外部 CSS 文件。先创建一个独立的 CSS 文件，如 styles.css，在其中编写样式：

.common-style {
  color: green;
  font-weight: bold;
}

然后在 Vue 组件中通过 import 语句引入该文件：

<template>
  <div class="common-style">使用外部 CSS 文件样式</div>
</template>

<script>
import './styles.css';
export default {
  // 组件选项
};
</script>

Vue 还支持 scoped 样式。在 <style> 标签上添加 scoped 属性，样式就只会作用于当前组件，不会影响到其他组件。比如：

<template>
  <div class="unique">独特样式</div>
</template>

<style scoped>
.unique {
  border: 1px solid purple;
}
</style>

这样，即使其他组件也有相同类名的元素，也不会受到该样式的影响。

掌握这些在 Vue 文件中引入 CSS 的方法，能让开发者根据项目需求灵活选择合适的方式，提高开发效率，打造出美观且高效的 Vue 应用。