Vue.js 如何在Vue 3中导入局部CSS

在本文中，我们将介绍如何在Vue 3中导入局部CSS。Vue 3是一个流行的JavaScript框架，用于构建用户界面。它提供了一种简单易用的方式来组织和管理应用程序的各个组件，包括HTML模板、JavaScript代码和CSS样式。

在Vue 3中，使用<style>标签可以定义组件的样式。默认情况下，这些样式会在全局范围内生效，影响整个应用程序的外观。然而，有时候我们希望将样式限定在组件内部，以避免样式冲突和命名空间问题。

在Vue 3中使用scoped属性

Vue 3提供了一个scoped属性，用于将样式限定在组件的作用域内。当我们在组件的<style>标签上添加scoped属性时，样式将只应用于当前组件及其子组件，不会泄漏到其他组件中。

下面是一个示例代码：

<template>
  <div class="app">
    <h1>Welcome to My Vue App!</h1>
    <p>Scoped CSS Example</p>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style scoped>
.app {
  background-color: #f5f5f5;
  padding: 20px;
}

h1 {
  color: #333;
}

p {
  color: #777;
}
</style>

在上面的示例中，我们给<style>标签添加了scoped属性。这意味着.app类将只应用于当前组件及其子组件，而不会影响其他组件。类似地，h1和p选择器也只会作用于当前组件内的元素。

CSS Modules

除了scoped属性外，Vue 3还提供了一种更灵活的方式来导入和使用局部CSS，即CSS Modules。CSS Modules允许我们在Vue组件中导入外部的CSS文件，并将其作为模块来使用。

首先，在Vue组件的<style>标签中使用:module属性来启用CSS Modules。然后，就可以使用@import关键字导入外部的CSS文件，并给导入的样式赋予一个唯一的名称。接下来，可以在模板中使用这些样式名称来应用所需的样式。

下面是一个示例代码：

<template>
  <div class="app">
    <h1>Welcome to My Vue App!</h1>
    <p>CSS Modules Example</p>
    <p :class="style.redText">This text will be red.</p>
    <p :class="style.blueText">This text will be blue.</p>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style module>
@import 'styles.css';

.app {
  background-color: #f5f5f5;
  padding: 20px;
}

h1 {
  color: #333;
}

</style>