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

Step 1: Prepare CSS Files

First, place your CSS file within the assets directory. For example, if you have a CSS file named style.css, you can store it in the assets/css/ subdirectory.

Step 2: Import CSS in Nuxt.js Configuration

In a Nuxt.js project, you can import CSS files globally by modifying the nuxt.config.js file. Open this file, locate the css array, and add the path to your CSS file. For example:

javascript
export default {
  css: [
    '~/assets/css/style.css' // Ensure the path is correct
  ]
}

Step 3: Use CSS Styles

Once the CSS file is added to the configuration, Nuxt.js automatically applies these styles throughout your project. This allows you to use the CSS classes defined in style.css in any component or page.

Example

Suppose you have the following styles in assets/css/style.css:

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

Then, in your page or component, you can directly apply this class:

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

Summary

By following these steps, you can easily import CSS files from the assets folder into your Nuxt.js project and utilize these styles globally. This approach centralizes style management and enhances convenience, particularly in large-scale projects.

Utilizing Nuxt.js's configuration file for managing style imports not only maintains project organization but also streamlines the management and maintenance of style files.