How to import css file from assets folder in nuxt. Js

在Nuxt.js项目中，从assets文件夹导入CSS文件相当直接。这里我将通过一个具体的步骤来说明如何实现这一过程：

步骤 1: 准备CSS文件

首先，你需要确保你的CSS文件已经放在assets文件夹中。比如说，你有一个名为style.css的CSS文件，你可以将其放在assets/css/目录下。

步骤 2: 在Nuxt.js配置文件中引入CSS

在Nuxt.js项目中，你可以通过修改nuxt.config.js文件来全局引入CSS文件。打开nuxt.config.js文件，找到css数组，并在其中添加你的CSS文件的路径。例如：

javascript
export default {
  css: [
    '~/assets/css/style.css' // 确保路径正确
  ]
}

步骤 3: 使用CSS样式

一旦CSS文件被添加到配置中，Nuxt.js会自动将这些样式应用到你的项目中。这意味着你可以在任何组件或页面中使用style.css中定义的样式类。

例子

假设在assets/css/style.css中，你有以下样式：

css
.body-background {
  background-color: lavender;
}

然后，在你的页面或组件中，你可以直接使用这个类：

vue
<template>
  <div class="body-background">
    Welcome to my Nuxt.js app!
  </div>
</template>

总结

通过以上步骤，你可以轻松地将CSS文件从assets文件夹导入到Nuxt.js项目中，并在全局范围内使用这些样式。这种方法使得样式管理更加集中和方便，尤其是在大型项目中。

使用Nuxt.js的配置文件来管理样式的导入不仅保持了项目的整洁，还利于样式文件的管理和维护。