vue 引入公共css文件的简单方法(推荐)

当我们使用 Vue.js 构建一个应用时，通常会使用多个组件，为了方便统一管理样式，我们需要引入公共的 CSS 文件，本文将详细讲解 Vue 引入公共 CSS 文件的简单方法。

步骤一：在 public 目录下创建 css 目录并添加 CSS 文件

在 Vue 项目的公共目录 public 下创建一个名为 css 的目录，然后在该目录下添加你的公共 CSS 文件，例如，我们可以在 public/css 目录下添加一个名为 common.css 的文件。

步骤二：在 Vue 组件中引入 CSS

使用 Vue 快速且方便地引入公共 CSS 文件最简单的方法是通过 main.js 文件进行全局引入，打开 main.js 文件并添加以下代码：

import './public/css/common.css'

这将在整个应用程序中引入 public/css/common.css 文件。 如果你仅希望在某个组件中引入上面的 CSS 文件，可以在该组件的代码中添加以下代码：

<style scoped>
  @import '../public/css/common.css';
</style>

此时，你可以在该组件中使用公共 CSS 文件。

示例一：全局引入公共 CSS 文件

现在，我们来使用一个示例来演示如何在 Vue 项目中全局引入公共 CSS 文件。

1. 在 public/css 目录下创建一个名为 common.css 的 CSS 文件，示例代码如下：

body {
  background-color: #f5f5f5;
  font-family: Arial, Helvetica, sans-serif;
}

1. 在 main.js 中引入该 CSS 文件

import './public/css/common.css'

1. 运行 Vue 项目，此时整个应用程序的背景颜色将变为灰色。

示例二：在组件中引入公共 CSS 文件

现在，我们来演示如何在 Vue 组件中引入公共 CSS 文件。

1. 创建一个名为 Header.vue 的组件，代码如下：

<template>
  <div class="header">
    <h1>头部</h1>
  </div>
</template>

<style scoped>
  @import '../public/css/common.css';
  .header {
    background-color: #fff;
    padding: 20px;
  }
</style>

在上面的代码中，我们同时引入了 common.css 文件，然后添加了一个名为 header 的 CSS 类和一些样式。

1. 在 App.vue 组件中使用 Header.vue 组件

<template>
  <div id="app">
    <Header />
    <router-view />
  </div>
</template>

<script>
import Header from "./components/Header.vue";

export default {
  name: "App",
  components: {
    Header
  }
};
</script>

此时，运行 Vue 项目后，你将看到一个带有自己独立样式的 Header 组件，与其他组件的样式将保持独立。

通过上面的两个示例，我们了解了如何在 Vue 项目中引入公共 CSS 文件，无论是全局引入还是在组件中引入都可以提供更好的可维护性和可扩展性。