在 Nuxt 中添加 CSS 文件

在 Nuxt 中，我们可以通过以下步骤来添加 CSS 文件：

1. 在 Nuxt 项目的根目录中创建一个名为 assets 的文件夹。
2. 在 assets 文件夹下创建一个名为 css 的文件夹。
3. 把你的 CSS 文件放入 css 文件夹中。
4. 修改 nuxt.config.js 中的 css 配置选项，将值设为一个数组，其中的每个元素是 CSS 文件的路径。

以下是这个过程的详细步骤：

创建 assets 文件夹

在 Nuxt 项目的根目录中创建一个名为 assets 的文件夹：

mkdir assets

创建 css 文件夹

在 assets 文件夹下创建一个名为 css 的文件夹：

mkdir assets/css

添加 CSS 文件

把你的 CSS 文件放入 css 文件夹中：

cp path/to/your.css assets/css/

配置 CSS

修改 nuxt.config.js 中的 css 配置选项，将值设为一个数组，其中的每个元素是 CSS 文件的路径：

export default {
  css: [
    '@/assets/css/your.css',
  ],
}

注意事项

• 如果你的 CSS 文件依赖其他文件（如图片或字体文件），请按照相对路径将它们放在 assets 文件夹中，并在 CSS 文件中使用相对路径引用它们。
• 如果你的 CSS 文件需要在某个页面上独立使用，可以在这个页面的 script 中通过 import 引用它。这个页面的 CSS 文件需要在 head 中给出引用。
• 你也可以使用第三方 CSS 库，如 Bootstrap 或 Tailwind CSS，只要将它们的 CSS 文件放在 assets/css 文件夹中，并在 nuxt.config.js 中配置它们的路径即可。

返回代码片段

## 创建 assets 文件夹

在 Nuxt 项目的根目录中创建一个名为 `assets` 的文件夹：

```bash
mkdir assets

创建 css 文件夹

在 assets 文件夹下创建一个名为 css 的文件夹：

mkdir assets/css

添加 CSS 文件

把你的 CSS 文件放入 css 文件夹中：

cp path/to/your.css assets/css/

配置 CSS

修改 nuxt.config.js 中的 css 配置选项，将值设为一个数组，其中的每个元素是 CSS 文件的路径：

export default {
  css: [
    '@/assets/css/your.css',
  ],
}

注意事项

• 如果你的 CSS 文件依赖其他文件（如图片或字体文件），请按照相对路径将它们放在 assets 文件夹中，并在 CSS 文件中使用相对路径引用它们。
• 如果你的 CSS 文件需要在某个页面上独立使用，可以在这个页面的 script 中通过 import 引用它。这个页面的 CSS 文件需要在 head 中给出引用。
• 你也可以使用第三方 CSS 库，如 Bootstrap 或 Tailwind CSS，只要将它们的 CSS 文件放在 assets/css 文件夹中，并在 nuxt.config.js 中配置它们的路径即可。